vue路由与周记-CSDN博客

本文链接：https://blog.csdn.net/qq_73917015/article/details/133838522

一周感受

首先说一下本周的感受吧，挺忙的

由于小组招新，本周当了回面试官，进行招新面试，刚开始确实比较紧张我的要求比较宽。当面的次数多了感觉也没啥紧张的，要求较刚开始比较严。期间面了一个人，基本一问三不知，一场面试下来，回答的还没我说的多，所以我认为以后在我面试的时候话要多说点，不能连面试管说的多都没有吧，遇到一些不会的题，有思路情况下把自己知道的说一下，完全没有思路情况下，直接回答“不好意西，这东西接触较少”等之类的话中间最好保持一直在回答面试管的问题的那种状态，不要什么的不说，在那干坐着等面试官催你，这样印象很不好。

Vue路由

本周学习vue路由相关问题

1.安装vue-router

路由版本比当前vue版本高出1个版本，如果版本号不符合会报错

执行命令npm i vue-router@版本号

2.路由整体结构

首先你要有个路由文件

在src下建立router文件,在文件里路由js为文件
基本内容如下

import VueRouter from 'vue-router'
import NameP from '../page/组件1.vue'
import AboutP from '../page/组件2.vue'  
import chil from '../components/组件3.vue'      
export default new VueRouter({
    routes:[
        {
            path:'/a',
            component:NameP,
            children:[
                {
                    name:'chil1',
                    path:'chil',
                    component:chil
                }
            ]
        },
        {
            path:'/b/:id',
            component:AboutP
        }
    ]
})

在src下mian.js内容有如下

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

在路由组件中

<template>
    <div>
        <h1>你好1</h1>
        <router-link :to="{ name:'chil1‘}" >展示</router-link>//或者to='/xx/xx'
        <router-view></router-view>
    </div>
</template>

<script>
export default {
 name:'NameP'
}
</script>

router-link标签相当于a标签
router-view标签是用来展示子路由组件的

在app组件templat有如下

<template>
 <div>
  <h1>{{ personList.length }}</h1>
  <router-link to="/a" active-class="a1">  曲折1</router-link>
  <router-view/>
 </div> 
</template>

这样一个简单的路由就准备完成了

3.路由传参

我推荐看路由传参，这篇文章讲了8中传参方法，比较全面

4.路由守卫

全局路由守卫

router.beforeEach((to,from,next) => {//前置路由守卫
    console.log('全局守卫');
    // 以下可以做一些路由判断
    next(); //不写这一句会无法跳转
});
router.afterEach((to,from,next) => {//后置路由守卫
    console.log('全局守卫');
    // 以下可以做一些路由判断
    ///没有next
})

to到达的路径相关路由信息
from 原始页面路由
next放行
beforeEach可以理解为点击之后，没跳转之前

独享路由守卫

直接在路由组件配置路径对象里添加

 beforeEnter: (to, from, next) => {
 		 console.log('全局守卫');
    	   // 以下可以做一些路由判断
           next() 
        }

独享守卫没有后置守卫

5.关于路由的一些基本事项

当切换路由的时候路由组件是默认销毁于重建的，当希望路由组件不被销毁时就可以在 router-view包层keep-alive
<keep-alive> <router-view/> </keep-alive>
同时注意注销组件身上的事件
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置。使用 children 参数实现子路由，需要先定义后引用，懒加载component: () =>{}会失效。使用 children 参数实现子路由，子路由的 path，不要带 / 。以 / 开头的嵌套路径会被当作根路径，从而没有效果