vue-router在vue-cli中的使用

一、安装和基本使用

1. 使用npm安装

npm install vue-router --save

2. 在router文件夹的index.js中引入并安装

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// 注入插件
Vue.use(VueRouter)
// 定义路由
const routes = [
  {
    // 路由匹配的路径
    path: '/',
    // 组件名称
    name: 'Home',
    // 引入的Home组件 
    component: Home
  }
]
// 创建router实例
const router = new VueRouter({
  mode: 'history',
  routes
})
// 导出router实例
export default router

3. 挂载到Vue实例中

import router from './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4. 在相应的位置使用路由,如App.vue文件中

<template>
  <div id="app">
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/home">首页</router-link>
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

二、路由基础

1、嵌套路由与命名路由

const routes = [
  {
    path: '/',
    // 定义路由名称
    name: 'Home',
    component: Home， 
    // 定义嵌套路由
    children: [
      { 
        path: '', // 默认路径
        redirect: "news"
      },
      {
        // 在子路由中并不需要 "/"
        path: "news",
        component: HomeNews
      }
    ]
  }
]

2、重定向与别名

• 通过redirect控制重定向

const routes = [
  {
    // 访问地址
    path: '/a',
    // 重定向的地址
    redirec: '/b'
  }
]

• 重定向到命名路由

const routes = [
  {
    path: '/a',
    redirect: { name: 'foo' }
  }
]

• 别名：当访问地址位"/b"时，URL会显示“/b”，但实际的访问组件是A

const routes = [
   { path: '/a', component: A, alias: '/b' }
]

3、命名视图

• 当多个组件不是嵌套展示，而是同时展示式时，就需要用到命名路由

<!-- 默认组件显示位置 -->
<router-view></router-view>
<!-- a显示位置 -->
<router-view  name="a"></router-view>
<!-- b显示位置 -->
<router-view  name="b"></router-view>
const routes = [
  {
    path: '/',
    components: {
      default: Foo,
      a: Bar,
      b: Baz
    }
  }
]

4、router-link的使用

• to 属性：表示目标路由的链接

<!-- 字符串 -->
<router-link to="/home">Home</router-link>
<!-- 使用 v-bind 的 JS 表达式，并且有参数 -->
<router-link :to="'/user/'+userId">我的</router-link>
<!-- 对象的形式 query -->
<router-link :to="{ path:'/profile', query: { name :'gwg', age: 22}}">档案</router-link>
<!-- 对象的形式 params -->
<router-link :to="{ path:'/profile', params: { name :'gwg', age: 22}}">档案</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name:'profile', params: { name :'gwg', age: 22}}">档案</router-link>

• replace属性：跳转到home页后，不会留下之前的访问记录

<router-link replace to="/home">首页</router-link>

• tag属性：设置router-link渲染的标签

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

• active-class属性：设置路由激活时的类型名

<template>
  <!-- 路由激活时，为router-link添加active类 -->
  <router-link active-class="active" to="/home">首页</router-link>
</template>
<style>
.active {
  color: #f00;
}
</style>

5、keep-alive与router-view

• keep-alive: 它是Vue中的内置组件，可以保留组件的状态，避免重复渲染。使用它包裹router-view时，可以保存路由的状态

<keep-alive>
  <router-view></router-view>
</keep-alive>

• keep-alive中include属性：这个属性的值为一个字符串或者正则表达式，只有匹配的规则才会进行缓存

<keep-alive include="Home">
    <router-view></router-view>
</keep-alive>

• keep-alive中exclude属性：这个属性的值为一个字符串或者正则表达式，匹配的规则不会进行缓存

<keep-alive exclude="Home">
  <router-view></router-view>
</keep-alive>

• 注意： 在上面规则中，需要给Home组件添加一个组件名称"Home"，否则相应的规则并不会生效

export default {
  name: 'Home'
}