vue - configuración de enrutamiento

Usando enrutamiento, una salida puede saltar a dos páginas.

Pasos de implementación del efecto :

Paso 0, instalar el enrutamiento

Al instalar el enrutamiento, preste atención a su versión de vue. Si ejecuta npm install vue-routerel comando directamente, se descargará la última versión. La última versión es adecuada para vue3.0. Estoy usando la versión 2.7, así que ejecute el npm install --save vue-router@3comando.
Si necesitas desinstalar la ruta anterior, puedes hacerlo npm uninstall vue-router.

Lo siguiente está escrito directamente en main.js :

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//1. 安装   引入路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//2. 定义路由组件
import Home from "./views/Home.vue"
import news from "./views/news.vue"

//3.定义路由- 配置路由走向
const routes = [
  {
    
    
    path: "/", //页面的路径
    component: Home  //去哪个页面
  },
  {
    
    
    path: "/news", //页面的路径
    component: news  //去哪个页面
  }
]

//4. 创建router实例，然后传“routes”配置
const router = new VueRouter({
    
    
  //routes : routes
  routes
})

//5. 创建和挂载根实例
new Vue({
    
    
  router, //router: router
  render: h => h(App),
}).$mount('#app')

Antes de esto, creé dos páginas. Cómo mostrarlas sin páginas:
tenga en cuenta que las páginas aquí están en el directorio src. El nombre lo puede definir usted mismo, generalmente llamado "vista".


Finalmente, se puede mostrar directamente en la aplicación. vista. .

<template>
  <div id="app">
      app
      <!-- 显示导航 -->
      <div>
        <router-link to="/">首页</router-link> | 
        <router-link to="/news">新闻页✌</router-link>
      </div>
      <!-- 显示路由出口 -->
      <router-view></router-view>
  </div>
</template>

<script>

export default {
      
      
  name: 'App',
  components: {
      
      
  }
}
</script>

<style lang="less">
#app {
      
      
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>