vue-router复习整理

1 vue-router下载

npm i vue-router --save

2 vue-router使用

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

const { default: VueRouter } = require("vue-router");
import Vue from'vue';
import Show from'@/components/Show'
Vue.use(VueRouter)
export default new VueRouter({
    routes:[
        {
            path:'/show',
            component:Show
        }
    ]
})

在main.js文件中引入router文件夹下的index.js文件

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

步骤1：添加路由链接

<router-link to="look"> 去look</router-link>

步骤2：添加路由填充符

  <router-view></router-view>

3 vue路由实现的两种方式

hash模式和history模式

mode:'hash'

mode:'history'

区别：

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.mimi.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.mimi.com/goods/id 如果后端缺少对 /book/id的路由处理，将返回 404 错误。

4 vue路由的钩子函数

4-1、全局钩子函数（全局守卫）

全局前置守卫

router.beforeEach((to,from,next) => {
    console.log(to)
    console.log('------')
    console.log(from)
    next()
})

全局解析守卫

// 全局解析守卫
router.beforeResolve((to,from,next) => {
    console.log('beforeResolv')
    console.log(to)
    console.log('------')
    console.log(from)
    next()
})

全局后置钩子

// 全局后置钩子
router.afterEach((to,from) => {
    console.log(to,from)
})

afterEach可以用来修改标题

router.afterEach((to)=>{
    if(to.meta.title){
        window.document.title=to.meta.title
    }
})

4-2、单个路由钩子函数（路由独享守卫）

使用场景：直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。比如可以用于登录校验

        {
            path: '/order',
            component:() => import('../components/Order.vue'),
            meta: {
                isShow: true
            },
            beforeEnter:(to,from,next) =>{
                console.log('路由独享守卫')
                console.log(to,from)
                console.log('路由独享守卫')
                next()
            }
        }

4-3、组件级钩子函数（组件内守卫）

beforeRoutEnter比生命周期beforeCreate函数先执行，所以this实例还没有创建出来

当进入组件之前，执行beforeRoutEnter(to,from,next)路由钩子函数

	beforeRouteEnter(to,from,next){
        console.log('----beforeRouteEnter-------')
        console.log(`--- beforeRouteEnter----${JSON.stringify(to.fullPath)}----`)
        console.log(`--- beforeRouteEnter----${JSON.stringify(from.fullPath)}----`)
        console.log(this)
        next((vm)=>{
            vm.comName='被改变了'
            console.log(this.comName)
            console.log(this)
        })
    }

子路由切换的时候会执行beforeRouteUpate(to, from, next)钩子函数。

    
    beforeRouteUpdate(to,from,next){
        console.log(`--- beforeRouteUpdate----${JSON.stringify(to.fullPath)}----`)
        console.log(`--- beforeRouteUpdate----${JSON.stringify(from.fullPath)}----`)
       next()
    }

页面路由切换，跳转页面离开的时候触发beforeRouteLeave(to,from,next)

   beforeRouteLeave(to,from,next){
        console.log('beforeRouteLeave离开')
        next();
    }

使用场景：

• 清除当前组件中的定时器；

• 当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转；

• 当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中

5 动态路由匹配

静态路由不传递参数；动态路由传递参数！

路由中配置

        {
            name:'my',
            path:'/my/:userid',
            component:My,
            meta: {
                indexHead:true,
                title:'用户信息'
            }
        }

组件中获取参数

       <p>{{$route.params.userid}}</p>

6 编程式导航

this.$router.push()//向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。
this.$router.replace()//不会向 history 添加新记录，而是替换掉当前的 history 记录。
this.$router.go()//在 history 记录中向前或者后退多少步

示例:路不配置参数

		{
            name:'my',
            path:'/my',
            component:My,
            meta: {
                indexHead:true,
                title:'用户信息'
            }
        }

  <button @click="goPush">去</button>

        goPush(){
            this.$router.push('/my')//字符串s
        }

        goPush(){
            this.$router.push({path:'/my'})//对象
        }xians

传递参数

说明：使用params传递参数，必须使用命名的路由，不能使用path，参数不显示在地址栏。

        //传递参数
        goPush(){
            this.$router.push({
                name:'my',
                params:{
                    userid:'23'
                }
            })
        }

说明：使用query传递参数，参数会显示在地址栏

        goPush(){
            this.$router.push({
                path:'my',
                query:{
                    userid:'23'
                }
            })
        }

示例：路由配置参数

        {
            name:'my',
            path:'/my/:userid',
            component:My,
            meta: {
                indexHead:true,
                title:'用户信息'
            }
        }

使用push传递参数,参数存在于params

        goPush(){
            this.$router.push({
                path:'/my/23'
            })
        }

使用params传递参数，需要使用命名路由。

        goPush(){
            this.$router.push({
                name:'my',
                params:{
                    userid:34
                }
            })
        }

说明：路由配置参数，不适用query传递参数

7 $route 和 $router的区别

router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。

console.log(this.$router)

route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。

console.log(this.$route)

8 vue active-class的用法

active-class是标签被点击时的样式

<router-link to="/my" class="class='active-class'">my</router-link>

9 响应路由参数变化

当地址栏中参数改变时，便得到监测

    watch:{
        $route(to,from) {
            console.log(to)
            console.log(from)
        }
    }