vue-router路由

ppgo8 于 2023-08-09 发布

vue-router路由

相关理解

image-20230712113541851

image-20230712115007256

什么是路由？

  1. 路由就是一组映射关系，==key-value==。

  2. key为路径，value可能是函数function或组件component 。

路由分类

  1. 前端路由
    • 理解：value是组件，用于展示页面内容
    • 工作过程：当浏览器路径改变时，对应的组件就会显示
  2. 后端路由
    • 理解：value是函数，用于处理客户端的需求
    • 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

vue-router

声明式路由跳转

基本使用

  1. 安装vue-router

  2. 写router配置项：在router/index.js文件中 （分为4步）

    // 引入Vue
import Vue from 'vue'
// 引入VueRouter
import VueRouter from 'vue-router'
   
   
// 1.使用插件
Vue.use(VueRouter)
   
// 2.引入组件
import About from '../components/About'
import Home from '../components/Home'
   
// 3.创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})
   
// 4.暴露router
export default router

  3. 点击页面按钮实现切换（导航式跳转方式）

    router-link标签最终会转换成a标签，不改变a标签的样式结构。

    router-link标签：将原来a标签的href属性变成to，然后路径写成/组件名的格式，无后缀

    <!-- Vue借助router-link标签实现浏览器路由的切换，用这个标签替换a标签 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>

    <a class="list-group-item active" href="./about.html">About</a>

  4. 指定路由组件在页面中的展示位置

    Vue借助router-view标签指定组件的呈现位置
<router-view></router-view>

    上述内容不发生浏览器请求，仅涉及前端显示内容的切换。

注意点

  1. 组件类型

    • 组件分类

      • 一般组件：定义、在app.vue中引入、在vc中注册、在template中使用

      • 路由组件：使用router-link、router-view，无需在app中注册写组件

    • 存放组件

      • 一般组件和路由组件，会把他们放在不同的文件夹下面。

      • pages存放路由组件，components存放一般组件

  2. 不用的路由组件是隐藏了还是销毁了？

    • 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

      （但是不用再次发送网络请求）

    • 验证：使用生命周期钩子beforedestroy可以验证

  3. route和router

    • router 路由器

      整个应用只有一个router，可以通过组件的$router属性获取。

    • route 路由规则

      每个组件都有自己得route属性；

      里面存储组件自己的路由信息，可以通过组件的$route属性获取。

<router-link>的replace属性

嵌套（多级）路由

路由传参

query参数

  1. 路由跳转时传递参数

    <!-- 传递query参数,to的字符串写法 -->
<router-link :to="/home/news?id=666&title=你好">点击跳转到news页面</router-link>
   
<!-- 传递query参数,to的对象写法 -->
<router-link 
     :to="{
          path:"/home/news",
           query:{
               id:666,
               title:'你好'
           }
          }"
    >点击跳转到news页面</router-link>

  2. 接受/使用参数

    // 在to的path/name对应的组件中使用接受的数据
   
// 在vc中使用数据
this.$route.query.id
this.$route.query.title
// 在模板中使用数据
$route.query.id
$route.query.title

params参数

路由的props配置

命名路由

编程式路由导航

缓存路由组件

路由守卫

全局路由守卫

全局路由守卫有全局前置路由守卫、全局后置路由守卫。

配置在router/index.js文件中

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享路由守卫

配置在router/index.js文件中的特定的路由规则下

// 独享路由守卫只有前置没有后置
beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}
// 该方法和上面的方法写法相同
beforeEnter: (to, from, next) => {
    // 逻辑和全局前置守卫的逻辑一样
    if (to.meta.isAuth) {
        if (JSON.parse(localStorage.getItem('school')) === 'atguigu') {
            next()
        } else {
            alert('学校名不对,不与通过!')
        }
    } else {
        // 其他页面全部允许访问,不做任何限制
        next()
    }
}

组件内路由守卫

注意

只有通过路由规则进入该组件时,才会进行守卫。

<About/> // 通过标签的方式显示组件,不会执行组件路由守卫

配置在每个组件文件中，和data平级

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
    // to必定是自己
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
    // from必定是自己
}

路由器的两种工作模式