vue路由

1.vue-router简单使用

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
其中#后的值不会发送网络请求。