新手入门——路由配置【vue-router】

一、新手入门

1. 创建一个简单的路由

1. 初始化一个vue项目之后，项目中要有如下目录：
   
2. 在main.js入口文件中，代码如下：

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

// 引入router文件夹位置，默认会加载文件夹中的index.js
import router from './router'   

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,   // vue实例 添加路由
  components: { App },
  template: '<App/>'
})

3. 在router文件夹下的index.js添加如下代码：

import Vue from 'vue'
import vueRouter from 'vue-router'   // 引入vue-router组件
Vue.use(vueRouter)   // 在vue实例中注册该组件

const Router =  new vueRouter({
  routes: [
    {
      path: '/',
      component: () => import('../views/HelloWorld.vue')
    }
  ]
})
export default Router

4. 运行vue项目之后，打开端口号，就可以直接访问views文件夹下面的HelloWorld.vue，这是vue项目初始化后默认的路由配置。
   

2. 路由嵌套

说明：

1. 在 first.vue 中嵌入 second.vue
2. first.vue 访问路径：http://localhost:8081/#/first
3. 嵌套效果访问路径：http://localhost:8081/#/first/second
4. 区分：
   （1）router-view：路由容器
   （2）router-link：路由导航

1. 在views文件夹下创建first.vue和second.vue，如下：【在frist.vue中嵌入second.vue】

<!-- first.vue template内容-->
<template>
    <div>
      <span>我的first</span>
      <router-view />  <!-- 路由容器，second.vue的内容显示在这里 -->
      <!--<router-link to="/first/second">点击路由跳转</router-link>--> 
    </div>
</template>

<!-- second.vue template内容-->
<template>
  <div>
    <span>我的second</span>
  </div>
</template>

3. 在router文件夹下的index.js中：

const Router =  new vueRouter({
  routes: [
    {
      path: '/',
      component: () => import('../views/HelloWorld.vue')
    },
    // 添加如下代码
    {
      path:'/first',
      component:()=>import('../views/first.vue'),
      children: [
        {
          path:'second', //以"/"开头的嵌套路径会被当作根路径，所以子路由上不用加"/"
          component: ()=> import('../views/second.vue')
        }
      ]
    }
  ]
})

结果：

3. 路由跳转

1. 方式一：在methods函数中执行：this.$router.push({'path':'/first/second'})
2. 方式二：在template中加入标签<router-link to="/first/second">点击路由跳转</router-link>

说明：

1. 不带参数的情况下，name和 path可以相互替换。
2. query 和 params可以传参，区别如下：
   （1）query传参：可配合name或path一起使用。跳转后url拼接参数，刷新之后不会消失。
   （2）params传参：只能配合name一起使用。例如：this.$router.push({ name:'second', params: {id:'123'}})。刷新页面后参数消失，除非在路由配置文件中将该path配置:参数名。
3. 取参：$route

4. 项目中多个模块路由分类管理

说明：当项目相对比较大型，模块较多的时候，可以将router/index.js文件里面的路由配置按模块分类配置，便于独立模块的路由管理。

1. 在router和views文件夹里建文件如下。其中，exampleRouter代表系统一个模块的所有路由。router/index.js是系统路由的入口文件。
   

2. 在router/example/index.js中引入home.js和helloWorld.js：

import home from './home'
import helloWorld from './helloWorld'
export default [
  {
    path: '/',
    redirect: '/example/first'
  },
  ...home,
  ...helloWorld
]

3. 在home.js中配置home模块路由：

export default [
  {
    path:'/example/first',
    name:'first',
    component: ()=> import('../../views/home/first.vue'),
    children:[
      {
        path:'second',
        name:'second',
        component:()=>import('../../views/home/second.vue')
      }
    ]
  }
]

4. 在helloWorld.js中配置helloWorld模块路由：

export default [
  {
    path: '/helloWorld',
    component: ()=>import('../../views/HelloWorld.vue')
  }
]

5. 在router/index.js中引入exampleRouter:

import Vue from 'vue'
import vueRouter from 'vue-router'
Vue.use(vueRouter)
import exampleRouter from './exampleRouter' //默认加载 exampleRouter 目录下的index.js

const Router =  new vueRouter({
  routes: []
})
Router.addRoutes(exampleRouter)  // 添加 exampleRouter 路由
export default Router

二、路由进阶

1. 常见路由属性

1. mode：路由默认有两种状态。
   （1）一种是路由的默认状态mode: hash;url路径带#号。
   （2）另一种是mode:history;url路径不带#号，同时可以实现页面的无刷新前进后退。例如：后退：back();、前进：forward();、前进：go(1); 后退：go(-1);、pushstatus(添加状态)、replacestatus(切换状态)。

const Router =  new vueRouter({
  mode:'history',  // history 模式
  routes: []
})

2. keepAlive：缓存视图，避免组件被重新渲染。

// 1. 在路由配置文件中，添加keepAlive属性。
 {
    path: '/example/helloWorld',
    meta:{
      keepAlive: true  //该路径视图将被缓存
    },
    component:()=> import('../../views/helloWorld.vue')
  }

<!-- 2. 在app.vue中，添加keep-alive标签。-->
<template>
  <div id="app">
    <keep-alive>
      <router-view  v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
  </div>
</template>

2. 路由守卫

参考文档：Vue-Router导航守卫官网