Vue(十三) 路由、路由嵌套、query、param传参、propos、replace属性。编程式路由导航，特有的生命周期函数，路由守卫

爱喝水的小鼠

已于 2024-09-03 09:14:45 修改

阅读量1.4k

点赞数 18

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-09-02 16:32:07 首次发布

本文链接：https://blog.csdn.net/qq_44285582/article/details/141822510

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

路由

路由

路由就是一组key-value的对应关系
- 前端路由： key是路径，value是组件component，用于展示页面内容
- 后端路由： key是路径，value是函数。后端根据请求路径找到匹配的函数，处理请求。
多个路由，需要经过路由器的管理。路由主要应用于SPA(Single page web application)应用

1. 基本使用

1、安装路由
vue2：npm i vue-router@3
vue3: npm i vue-router@4

2、编写路由器文件：src/router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// About和Home都是路由组件，所以放在文件src/pages下，一般组件则放在src/components里
import About from '../pages/About'
import Home from '../pages/Home'

// 创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home
    }
  ]
})

main.js

import VueRouter from 'vue-router'
import router from './router/index'
Vue.use(VueRouter)
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
  // 添加router配置项
  router,
}).$mount('#app') // 挂载容器

3、实现切换(active-class可配置高亮)
router-link标签实现路由组件的切换，to=...表示要切换的路径，根据路径对应到上边js文件中的路由组件。router-link本质上是a标签。

<router-link class="list-group-item" to="./home" active-class="active">Home</router-link>
 <router-link class="list-group-item" to="./about" active-class="active" >About</router-link

4、指定路由组件展示的位置

 <router-view></router-view>

router-link选择要展示哪个路由组件，将路由组件展示在router-view指定的位置中
在这里插入图片描述
注意：

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个路由组件都有自己的$route属性，里面存储着自己的路由信息。（非路由组件也有$route属性，其显示的是当前路由组件的一些信息。比如非路由组件Banner）

整个应用只有一个router(即About的router和Home的router是一回事)，可以通过组件$router属性获取到。

// 代码验证
// About组件
mounted () {
  console.log('About路由组件挂载');
  window.aboutRoute = this.$route
  window.aboutRouter = this.$router
},
// Home组件
mounted () {
  console.log('Home路由组件挂载');
  window.aboutRoute = this.$route
  window.aboutRouter = this.$router
},

在这里插入图片描述

项目中有多个router-link与router-view时，点击链接，到底跳转到哪一个router-view显示：
参考博客：Vue中router-link与router-view的对应关系和映射特点

2. 多级(嵌套)路由

要实现的效果：
在这里插入图片描述
Home组件里多了两个组件：News和Message

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

跳转路径：

<router-link to="/home/news">News</router-link>

由于子级路由在Home组件里，所以Home组件里有两个<router-link>,分别是News和Message。且Home组件里有一个<router-view>用来展示路由组件News或Message的内容。
图中的消息1，消息2是点击Message展示的消息。所以消息1，消息2是Message组件里的内容

<!--Home.vue文件-->
<template>
  <div>
   <router-link to="/home/news" active-class="active">News</router-link>
   <router-link to="/home/message" active-class="active">Message</router-link>
    <!-- 展示组件内容的位置 --> 
    <router-view></router-view> 
  </div>
</template>
<!--Message.vue文件-->
<template>
  <div>
    <ul>
      <li><a href="/message1">message001</a>&nbsp;&nbsp;</li>
      <li><a href="/message2">message002</a>&nbsp;&nbsp;</li>
      <li><a href="/message/3">message003</a>&nbsp;&nbsp;</li>
    </ul>
  </div>
</template>

3. 路由query传参

实现效果：
在这里插入图片描述
Message组件里嵌套Detail组件，点击不同的消息时，将参数传递给Detail组件，Detail组件展示内容。
传递参数：

<!--Message.vue组件-->
<ul>
    <li v-for="m in message" :key="m.id">
     <!-- 跳转路由并携带参数，to的字符串写法 -->
     <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> 
     <!-- 跳转路由并携带参数，to的对象写法 -->
      <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: m.id,
              title: m.title,
              }
            }"
          >{{ m.title }}</router-link>
    </li>
</ul>
 <div>
  <!-- Deatil组件展示在这儿 -->
   <router-view></router-view>
 </div>

接收数据

<!--Detail.vue组件-->
 <li>消息编号:{{ $route.query.id }}</li>
 <li>消息标题：{{ $route.query.title }}</li>

4. 命名路由

1、作用：跳转时简化编码，否则嵌套路由多了，路径很长
2、给路由命名

// 给谁起名字，就要把name写在谁的配置项里 
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'message', component: Message,
          children: [
            { name: 'xiangqing', 
             path: 'detail', 
             component: Detail }
          ]
        }
      ]
    }
  ]

3、简化跳转

<!--简化前-->
 <router-link to="/home/message/detail">跳转</router-link> 
<!--简化后-->
<router-link :to="{name:'xiangqing'}">跳转</router-link> 
<!--简化后携带参数-->
<router-link
 :to="{
   name: 'xiangqing',
   query: {...},
  }"
>跳转</router-link>

5. 路由param传参

1、配置占位符，声明接收param参数

 {
   path: 'message', component: Message,
   children: [
       // 配置占位符;占位的时候用的title，id；用params取参数的时候就能用title，id
      { name: 'xiangqing', path: 'detail/:id/:title', component: Detail }
   ]
  }

2、传递参数

<!-- 跳转路由并携带参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">跳转</router-link>
<!-- 跳转路由并携带参数，to的对象写法 -->
<router-link
   :to="{
      name: 'xiangqing',
      params: {
       id: m.id,
       title: m.title,
       },
    }"
>跳转</router-link>

注：使用to的对象写法时，传参用params时，只能用name；而不能用path指定路径

3、接收参数

 $route.params.id
 $route.params.title

6. propos属性

组件中每次读取路由参数时，都是 $route.params...
propos属性的作用是少写重复项，让路由组件更方便的接收到参数。
接收参数的组件设置propos属性

{
	name:'xiangqing',
	path:'detail/:id/:title',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
        // 缺点：传递的是死数据
	// props: { a: 1, b: 'hello' }

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件,通过propos接收参数时，不需要占位符了
	props($route){
		return {
			id:$route.query.id,
			title:$route.query.title
		}
	}
}

Detail组件接收参数

<li>消息编号:{{ id }}</li>
<li>消息标题：{{ title }}</li> 
...
props: ['id', 'title']

7. replace属性

作用：路由跳转时操作浏览器历史记录的模式
浏览器历史记录有两种写入方式：分别为push：追加历史记录，replace：替换当前记录。路由跳转时默认为push
开启replace模式:<router-link replace...>News</router-link>

8. 编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
实现路由条件，可以采用$router下的几个API

//$router的两个主要API
this.$router.push({
    name: 'xiangqing',
    query: {
        id: m.id,
        title: m.title
    }
})

this.$router.replace({
    name: 'xiangqing',
    query: {
        id: m.id,
        title: m.title
    }
})
// 类似于历史记录的前进后退
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

比如：
在这里插入图片描述
历史记录默认记录方式为push，所以依次点击：
About -> Home -> News -> Message -> 消息1的push查看 -> 消息2的replace查看 -> 消息3的replace查看

历史记录存储的是：
在这里插入图片描述
前进后退和go都是根据这个历史记录的顺序来进行跳转。比如点后退，则页面变成/home/messages页面

9. 缓存路由组件

作用：<keep-alive> 标签让不展示的路由组件保持挂载、不被销毁，标签里的include属性可用来指定缓存哪个路由组件
语法：

<!-- 如果不指定，则在这里展示的路由组件都被缓存 -->
<keep-alive>  
    <router-view></router-view>
</keep-alive>
<!-- 缓存多个 -->
<keep-alive :include="['News', 'Message']">
    <router-view></router-view>
</keep-alive> 
<!-- 缓存一个 -->
<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

当缓存News组件时，由News组件切换到Message组件。News组件不会被销毁。

//这个函数不执行则证明不会被销毁
beforeDestroy () {
    alert('News组件即将被销毁');
}

注意点:
（1） include里写的是组件名，即创建组件时定义的name属性
在这里插入图片描述
（2）注意</keep-alive>要加在哪里
想要缓存News组件，则应该加载News路由组件展示的区域

10. actived，deactived生命周期函数

这两个是路由组件独有的生命周期钩子，用于捕获路由组件的激活状态

actived：路由组件被激活时触发。
deactived：路由组件失活时触发。

比如News组件里的某句话加一个透明度样式设置，采用定时器，透明度不断发生变化。当切换为其他组件时，透明度不再变化，切换回来时，透明度继续发生变化。

如果采用之前的mounted和beforeDestroy函数

<li :style="{ opacity }">透明度变化</li>
<script>
data () {
  return {
      opacity: 1
    }
  },
  mounted () {
    this.timer = setInterval(() => {
      console.log('@');
      this.opacity -= 0.01
      if (this.opacity <= 0) {
        this.opacity = 1
      }
    }, 16)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
</script>

但是当News组件设置了缓存，即使切换为别的组件，News组件也不会被销毁，所以计时器仍旧在运行，透明度仍旧在变化。

这种情况下采用actived和deactived十分合适。

activated () {
    this.timer = setInterval(() => {
      console.log('@');
      this.opacity -= 0.01
      if (this.opacity <= 0) {
        this.opacity = 1
      }
    }, 16)
  },
  deactivated () {
    clearInterval(this.timer)
  },

11. 路由守卫

路由器文件router/index.js：

const router = new VueRouter({
  routes: [
    {
      name: 'guanyu',
      path: '/about',
      component: About,
      meta: { isAuth: false, title: '关于' }
    },
    {
      name: 'zhuye',
      path: '/home',
      component: Home,
      meta: { isAuth: false, title: '主页' },
      children: [
        { name: 'xinwen', path: 'news', component: News, meta: { isAuth: true, title: '新闻' }, },
        {
          name: 'xiaoxi', path: 'message', component: Message, meta: { isAuth: true, title: '消息' },
        }
      ]
    }
  ]
})

给每个路由的meta配置项存放了key-value键值对；

1、全局路由

beforeEach()每次路由切换之前都会调用这个函数，函数里进行一些逻辑处理，判断是否可以跳转之类的
afterEach():每次路由切换之后被调用，可用来修改标签页的标题。
meta，在这个属性里配置isAuth,方便判断是否要对该路由进行权限控制

// 全局前置路由守卫--初始化的时候被调用，每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  console.log('全局前置路由守卫',to, from);    
  if (to.meta.isAuth) {
    if (localStorage.getItem('school') === 'atguigu') {
      next() //放行，若不调用这个函数，则不进行路由切换
    } else {
      alert('学校名不对，无权限查看');
    }
  } else {
    next()
  }
})
// 全局后置路由守卫--初始化的时候被调用，每次路由切换之后被调用
router.afterEach((to, from) => {
  console.log('全局后置路由守卫');
  console.log(to, from);
  document.title = to.meta.title || '硅谷系统' 
})

在这里插入图片描述

2、独享路由

beforeEnter()：给某一个路由单独配置

{
  name: 'xinwen', 
  path: 'news', 
  component: News, meta: { isAuth: true, title: '新闻' },
  beforeEnter (to, from, next) {
     if (to.meta.isAuth) {
       if (localStorage.getItem('school') === 'atguigu') {
          next()
       } else {
          alert('学校名不对，无权限查看');
         }
      } else {
        next()
      }
  },
},

3、组件内路由守卫

全局和独享路由守卫都是在路由配置文件里写，组件内路由守卫是在对应的组件内写

// About.vue
//进入守卫：通过路由规则，进入该组件之前被调用
beforeRouteEnter (to, from, next) {
    console.log('About--beforeRouteEnter');
    console.log(to, from);
    next()
},
//进入守卫：通过路由规则，离开该组件时之前
 beforeRouteLeave (to, from, next) {
    console.log('About--beforeRouteLeave');
    console.log(to, from);
    next()
}

注意是通过路由规则进入该组件时，这两个函数才会被调用
不通过路由规则进入该组件的情况，比如：作为一般组件直接被调用
在这里插入图片描述

12. 路由器工作的两种模式

1、hash模式
hash值：对于一个url来说，路径中#后边的内容统称为hash值。hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

在这里插入图片描述
hash模式

地址中永远带着#号
兼容性较好
刷新页面时，hash值不会包含在请求里，所以刷新页面发送请求不会出错。但若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

2、history模式

地址中没有#号
兼容性略差
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。（刷新页面时，整个url都会发给服务器会报404错误）

3、设置模式

//index.js，默认是hash模式
const router = new VueRouter({
  mode: 'history',
   ...
})

拓展：
项目打包：npm run build
打包就是将vue文件转为基本的css，js，html等浏览器认识的文件。

爱喝水的小鼠

关注

18
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录