vue-router路由

Vue Router 是 Vue.js 官方的路由管理器

自动全局安装：

vue create 项目名称

手动配置：

1、安装

在app项目文件夹里面

npm i vue-router

2、在min.js下引入包

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

3、使用use来引用（使用）

Vue.use(VueRouter);

4、需要配置router -> route.js

引入组件，配置路由表
配置路由表（当前是哪个路径需要执行哪个组件）

const routes = [
//配置什么路径就走哪个组件
  {
      path:'/', //根路径
      component:app //app就是根
  },
  {
    path: '/foo',//路径
    component: Foo//组件
  },
  {
    path: '/bar',
    component: Bar
  }
];
export default new VueRouter({
    router:routes
    //等同于
    //router
})

在new vue-router时候，通过routes来引配置数

new Vue时候是通过router来引路由

5、放到跟下

 new Vue({
    el:'#app',
    render:()=>h,
    router
 })

6、渲染，在页面中定义router-view 标签

<router-link></router-link>
//有children时候，父组件必须有router-view
<router-view></router-view>
//路由匹配到的组件将渲染在这里

<router-link>//默认会渲染成一个a标签
<router-link tag="button">
//这样可以加一个按钮的样式

---

<router-link>

to属性

表示目标路由的链接

通过 to 属性指定目标地址
默认渲染成带有正确链接的 <a> 标签

/*字符串*/
<router-link to="home">home</router-link>

/*v-bind 的 JS 表达式 */
如果是:to，路径要写成字符串

比如<router-link :to="'home'">Home</router-link>

:to 可以是字符串也可以是对象

/*命名的路由 params*/
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

/*带查询参数，下面的结果为 /register?plan=private*/
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

:to="{path:'a'}"
:to="{params:{a:5}}" 

注意：如果使用params，那么就不能定义path，改为使用name

tag属性

具有tag属性的router-link会被渲染成相应的标签

//比如生成一个按钮
<router-link tag ="button"></router-link>

replace属性

replace在routre-link标签中添加后，页面切换时不会留下历史记录

<router-link :to="/home" replace></router-link>

active-class属性

默认值 "router-link-active"

设置 链接激活时使用的 CSS 类名

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

可以在router.js文件中设置

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})

 exact属性

开启router-link的严格模式，默认值 false

//这个链接只会在地址为 / 的时候被激活
<router-link :to="/" exact>home</router-link>

exact-active-class属性

默认值 router-link-exact-active

配置当链接被精确匹配的时候应该激活的 class

激活class 应用在外层元素

让激活 class 应用在外层元素，而不是 <a> 标签本身,可以用 <router-link> 渲染外层元素，包裹着内层的原生 <a> 标签

<router-link tag="li" to="/foo">
  <a>/foo</a>
</router-link>

路由嵌套

路由嵌套就是有多层路由嵌套在一起，也就是子路由

栗子：

APP.vue文件

<template>
  <div id="app">
    <router-link to="/" tag="button">home</router-link>
    <router-link to="/About" tag="button">about</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
</script>
<style>
.actived{
  background:orange;
}
</style>

About.vue文件

（里面包含sub1、sub2、sub3三个子路由页面）

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-link to="/about/sub1" tag="button">sub1</router-link>
    <router-link to="/about/sub2" tag="button">sub2</router-link>
    <router-link to="/about/sub3" tag="button">sub3</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name:'about'
}
</script>

router.js路由文件

 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Home from '../views/Home.vue'
 import About from '../views/About.vue'
 import Sub1 from '../views/sub/sub1.vue'
 import Sub2 from '../views/sub/sub2.vue'
 import Sub3 from '../views/sub/sub3.vue'
 Vue.use(VueRouter);

 const routes = [
     {
         path:'/',
         component:Home
     },
     {
         path:'/About',
         component:About,
         children:[
             {
                 path:'sub1',
                 component:Sub1
             },
             {
                 path:'sub2',
                 component:Sub2
             },
             {
                 path:'sub3',
                 component:Sub3
             }
         ]

     }
 ]

 export default new VueRouter({
     linkExactActiveClass:'actived',//精确匹配选中的样式
     routes
 });

在路由上挂一个children属性，children为一个数组

子路由路径不用加/

对于<router-view></router-view>的用法

如果有子级路由，那么记得在父级身上加<router-view></router-view>

此时组件就会在父级组件显示

不管嵌套多少层都遵循此规则，多级嵌套的话可以使用一个模板

正常写法中，一层路径(/xxx)对应一个router-view

比如url: /a/b/c

那/a对应的就是App.vue中的router-view，/a进入a.vue中

那/a/b对应的就是a.vue中的router-view， /a/b进入b.vue中