vue路由
@[toc]
1.vue-router简单使用
1.1vue-router的下载
npm i vue-router@3
1.2在main.js
// 改文件是项目的入口文件
// 映入vue
import Vue from 'vue'
// 映入app组件
import App from './App.vue'
//映入vue-rputer
import VueRouter from 'vue-router'
//映入路由器
import router from './router'
// 关闭vue生产提示
Vue.config.productionTip = false
//应用vuerouter
Vue.use(VueRouter)
// 创建vue实例
new Vue({
el:"#app",
render: h => h(App),
router:router
})
1.3router的配置
//改文件用于专门创建路由
import VueRouter from "vue-router";
// 映入组件
import Home from '../components/Home'
import About from '../components/About'
//创建并暴露一个路由
export default new VueRouter({
routes:[
{
path:'/home',
component:Home
},
{
path:'/about',
component:About
}
]
})
1.4 路由的切换
<router-link to="/about">About</router-link>
<router-link to="/home">Home</router-link>
1.5路由指定位置的显示
<!-- 指定组件展示的位置 -->
<router-view></router-view>
注意：
1.路由组件一般存放在pages组件中，普通组件存放在commopnts组件中。
2.每个zujain都有一个$router属性，存放自己的路由信息。
3.切换的路由组件一般是被销毁了2.嵌套路由
2.1 多级路由的配置
export default new VueRouter({
routes:[
{
path:'/home',
component:Home,
children:[
{
path:'message',
component:Message
},
{
path:'news',
component:News
}
]
},
{
path:'/about',
component:About
}
]
})
<template>
<div>
<router-link to="/home/message">Message</router-link>
<router-link to="/home/news">News</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
<style></style>
注意在home页面中需要在跳转的页面上加上/home的路径
2.2 多级路由的query传参
1.query传参
<router-link
:to="{
path: '/home/message/detail',
query: {
id: item.id,
title: item.title,
},
}"
>
{
{
item.title }}
</router-link>
2.接受参数
在vm的route中接受父路由传递的参数
<ul>
<li>消息id:{
{
$route.query.id }}</li>
<li>消息标题：{
{
$route.query.title }}</li>
</ul>
2.3 多级路由的params传参
1.params传参
<router-link :to="`/home/message/detail/${item.id}/${item.title}`">{
{
item.title
}}</router-link>
2.接受参数
<ul>
<li>消息id:{
{
$route.params.id }}</li>
<li>消息标题：{
{
$route.params.title }}</li>
</ul>
2.4 接受路由的props参数
在路由中配置全新的配置项props
props($route){
return {
id:$route.query.id,
title:$route.query.title
}
}
2.接受参数
props: ["id", "title"],
2.编程试路由
2.1 按钮的跳转
this.$router.push({
name: "detail",
query: {
id: item.id,
title: item.title,
},
});
this.$router.replace({
name: "detail",
query: {
id: item.id,
title: item.title,
},
});
2.2页面的前进与后退
this.$router.back();
this.$router.forward();
this.$router.go(2) //2表示前进2步，-1表示后退一步
2.3路由缓存
在路由内容展示的页面的router-view加上keep-live
<keep-alive include="news">
<!-- news为组件名 -->
<router-view></router-view>
</keep-alive>
3.路由守卫
3.1 配置前置路由守卫
1.在全局前置路由守卫中，to是即将要跳转的路由，from是来自那个路由，next是是否放行。
routes.beforeEach((to,from,next)=>{
console.log(to,from)
if(to.path==='/home/news'||to.path==='/home/message'){
if(localStorage.getItem('school')==='小明'){
next()
}else{
alert('不是小明')
}
}else{
next()
}
})
2.在route的mate中添加是否需要鉴权的条件。
在全局前置中通过判断是否需要鉴权来判断是否需要跳转。
3.2 独享路由守卫
beforeEnter:(to,from,next)=>{
console.log(to,from)
if(to.path==='/home/news'||to.path==='/home/message'){
if(localStorage.getItem('school')==='小明'){
next()
}else{
alert('不是小明')
}
}else{
next()
}
}
3.3 组件内的路由守卫
beforeRouteEnter(to, from, next) {
console.log(to, from);
if (to.meta.isAuth) {
if (localStorage.getItem("school") === "小明") {
next();
} else {
alert("不是小明");
}
} else {
next();
}
},
4.路由的两种请求模式
4.1hash
http://localhost:8080/#/home/news
其中#后的值不会发送网络请求。
