vue-router

目录

基本使用

rotes配置项

router-link

router-view

携带参数的几种方式

 编程式路由导航

keep-alive 缓存路由组件

---

基本使用

将非路由组件置于components文件夹下

路由组件置于pages文件夹下

npm install vue-router --save

 在项目src文件夹下创建router文件夹，新建index.js

import Vue from 'vue'
import VueRouter  from 'vue-router'

Vue.use(VueRouter);

export default new VueRouter({
    routes:[
        //在此处写你的路由配置
    ]
})

在main.js中

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

import router from '@/router'

new Vue({
  render: h => h(App),
  router    //注册路由
}).$mount('#app')

当你创建一个路由组件后

在router index.js 中引入

import Vue from 'vue'
import VueRouter  from 'vue-router'

Vue.use(VueRouter);

import Home from '@/pages/Home'

export default new VueRouter({
    routes:[
        {
            path:"/home",
            component:Home,
        }
    ]
})

rotes配置项

routes 是一个数组，它的成员是路由配置对象

每个配置对象可以包含以下内容

path:路由路径

name:该路由配置项的名称

component:当进入该路径时需要展示的路由组件文件

children:是一个数组，内写其子路由的配置对象，子路由的路径不加/

props:

props有三种写法

1、布尔值 props如果为true会将所有params参数以props的形式传递给目标组件

2、对象，对象中的key-value会已props的形式传给目标组件

3、函数

props($route){
    return {a:$route.query.a,b:$route.query.b}
}

meta:对象，该路由可以携带一些信息

router-link

router-link 本质上是a标签可以实现路由的跳转 它的属性
to：用于指定跳转的路径

name:当你给路由配置项取了名字以后，你可以用name代替to直接实现路由的跳转
tag：tag可以指定<router-link>之后渲染成什么组件，比如我们下面的代码会被渲染成一个<li>元素，而不是<a> 。 如：<router-link to='/home' tag='li'>
replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中

push:与replace相对,表示会留下history记录
active-class：当该路由被激活时，可以添加样式

router-view

router-view 标签，当路由进行跳转时，跳转路由的页面放置的位置

当路由发生切换时，之前的路由会被销毁

$route当前路由的路由规则

$router整个应用的唯一路由

携带参数的几种方式

1、使用router-link在路由跳转时携带参数 为query参数

字符串写法

 <router-link to="/home?a=1&b=2"></router-link>

对象写法

<router-link :to="{
    path:'/home',
    query:{a:1,b:2}
}">
</router-link>

2、使用router-link在路由跳转时携带参数 为params参数

字符串写法

<router-link to="/home/a/b"></router-link>

如果使用该方法传递params参数则需要在路由配置中加上

{
    path:'/home/:a/:b?    //问号表示该参数可以不传递
    component:Home
}

对象写法

<router-link :to="{
    name:'Home',
    parmas:{a:1,b:2}
}">
</router-link>

注意不能写path只能写name

 编程式路由导航

为什么要使用编程式路由导航，因为router-link的本质上是a标签，当我们需要使用button进行路由跳转时就必须使用编程式路由导航

<template>
    <input type="text"  v-model="keyWord"/>
    <button type="button" @click="goSearch">搜索</button>
</template>

<script>
export default {
    name:'Header',
    data() {
        return {
            keyWord: '',
        };
    },
    methods:{
        //search的编程式路由导航
        goSearch(){
            this.$router.push({
                name:'search',
                params:{keyWord:this.keyWord},
                query:{k:'aasdx'}
            })
        }
    }
}
</script>

1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3. this.$router.back(): 请求(返回)上一个记录路由
4. this.$router.go(-1): 请求(返回)上一个记录路由
5. this.$router.go(1): 请求下一个记录路由

keep-alive 缓存路由组件

<keep-alive :include="['缓存的组件名1','缓存的组件名2']">
    <router-view></router-view>
</keep-alive>

 缓存的路由组件在切换时不会被销毁

 由于缓存时不会销毁这导致一些无用行为（如定时器）不会被取消

有两个新的生命周期钩子

activated(){
    //当该组件从不出现在页面上到出现在页面上时触发
}
deactivated() {
    //当该组件从出现在页面上到不出现在页面上时触发
},