配置VueRouter

一、下载VueRouter

//如果使用Vue2，就安装3版本；Vue3就安装4版本，默认安装4版本
npm install vue-router@4

二、引入项目

1. 在src下新建router文件夹，在该文件夹下新建index.js文件,在该文件中新建实例并配置相关的路径

   

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   
   // 引入路由组件
   import login from '@/views/login'
   import register from '@/views/register'
   
   // 配置路由
   export default new VueRouter({
     routes: [
       {
         path: '/',
         component: login
       },
       {
         path: '/login',
         component: login
       },
       {
         path: '/register',
         component: register
       }
     ]
   })
   

2. 在main.js中引入路由并注册使用

   import Vue from 'vue'
   import App from './App.vue'
   
   // 引入路由
   import router from '@/router'
   Vue.use(router)
   
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
     // 注册路由
     router
   }).$mount('#app')
   

3. 在将要展示路由组件的文件中配置路由组件出口

   <template>
     <div>
       <!-- 路由组件出口 -->
       <router-view></router-view>
     </div>
   </template>
   

4. $route和$router的区别

   1. $route：可以获取路由的信息、参数

      this.$route.path
      this.$route.params|query
      this.$route.meta
      

   2. $router：进行编程式导航的路由跳转

      this.$router.push|this.$router.replace