vue的路由
1.路由的使用
-
npm install vue-router
安装路由,vue2版本安装vue-router3,vue3版本安装vue-router4 -
在main.js中引入和路由
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import router from './router/index' Vue.config.productionTip = false Vue.use(VueRouter); new Vue({ router, render: h => h(App), }).$mount('#app')
-
在scr文件夹中创建一个router文件夹,在router文件夹中创建一个index.js
import VueRouter from 'vue-router' import home from '../pages/Home.vue' //引入组件 import about from '../pages/About.vue'//引入组件 export default new VueRouter({ //配置路由导出 routes: [ { path: '/home', component: home }, { path: '/about', component: about } ] })
-
在组件中的切换是
<router-link to="/about" class="list-group-item" active-class="active">about</router-link> <router-link to="/home" class="list-group-item" active-class="active" >home</router-link> //active-class是选择的样式
-
路由组件的展示
<router-view></router-view>
2. 路由使用的几个注意点
- 路由组件通常是在pages文件夹中。一般组件通常是在components组件中。
- 通过切换是‘隐藏’了路由组件,默认是销毁了的,需要是的时候在去挂载。
- 每个组件都有自已的$route,里面存储这自已的路由信息
- 整个应用只有一个router。可以通过组件的$router属性获取。
3.嵌套路由的配置
{
path: '/home',
component: Home,
children: [ //使用children配置子路由
{
path: "msg", //子路由的不用加 “/” 要写成"/msg"
component: Message
},
{
path: "news",
component: News
}
]
},
嵌套路由的跳转 <router-link to="/home/news" active-class="active">新闻</router-link>
to 的路由要携带父路由 “/home/news”
4.路由传参
-
路由的query传参
-
传递参数
//字符串形式 <router-link class="list-group-item":to="`/home/msg/detail?id=${item.id}&title=${item.title}`" v-for="item in mesList" :key="item.id"> {{ item.title }} </router-link> //对象的形式传参 <router-link class="list-group-item" v-for="item in mesList" :key="item.id":to="{ path: '/home/msg/detail', query: { id: item.id, title: item.title }}">{{ item.title }}</router-link>
-
接受参数
<h3>消息的内容是:{{ $route.query.title }}</h3> <h3>消息的编号是:{{ $route.query.id }}</h3>
-
命名路由,用户简化路由跳转的路由长度
routes: [ { path: '/home', component: Home, children: [ { path: "msg", component: Message, children: [ { name: "detail", //路由命名 path: 'detail', component: Detail } ] }, { path: "news", component: News } ] }, //路由跳转是就可以简化 <router-link class="list-group-item" v-for="item in mesList" :key="item.id" :to="{ name: 'xiangqing', query: { id: item.id, title: item.title }}">{{ item.title }}</router-link>
-
-
使用params传递参数
-
首先要在理由的配置中什么参数的配置
children: [ { name: "xiangqing", path: 'detail/:id/:title',//申明params的参数 component: Detail } ]
-
在组件中传递参数时使用的方式
//第一中方式 <router-link class="list-group-item"v-for="item in mesList":key="item.id" :to="{ name: 'xiangqing', params: { id: item.id, title: item.title }}">{{ item.title }}</router-link > //第二种方式 <router-link class="list-group-item" :to="`/home/msg/detail/${item.id}/${item.title}`" v-for="item in mesList" :key="item.id" >{{ item.title }} </router-link>
在使用params传递参数时,用 :to的对象形式路由不可以用path,要用name:的形式
5.路由的props的配置形式
-
路由的props的值为对象
children: [ { name: "xiangqing", path: 'detail/:id/:title', component: Detail, props: { id: '001', title:"hello" } } ] //detail组件以props形式接受 props: ["id", "title"],
-
路由的props的值为true
children: [ { name: "xiangqing", path: 'detail/:id/:title', component: Detail, props: true } ] //detail组件可以接受到路由中params的参数 props: ["id", "title"], //只能接受params形式的参数
-
路由的props的函数形式
children: [ { name: "xiangqing", path: 'detail', component: Detail, props(route) { //可以接受query的参数 return { id: route.query.id, title: route.query.title } } } ] //detail组件同样是 props: ["id", "title"],
5.编程是路由导航
-
作用就是不借助
<router-link>
进入路由跳转。可以用于事件跳转 -
编码:
pushShow(item) { this.$router.push({ name: "xiangqing", //在router.js中配置的name属性 query: { id: item.id, title: item.title, }, }); }, replaceShow(item) { this.$router.replace({ name: "xiangqing", //在router.js中配置的name属性 query: { id: item.id, title: item.title, }, }); },
-
防window中的前进和后台或调到第几页
back() { this.$router.back(); }, forward() { this.$router.forward(); }, go(){ this.$router.go(2) }
6. 缓存路由组件
<keep-alive ></keep-alive>
-
缓存不被展示的路由组件,让其不被销毁
-
具体编码:
<keep-alive include="News"> //include = "News" 是要被缓存的路由组件名,没有包含的路由组件就不被缓存 <router-view> </router-view> </keep-alive>
7.两个新的生命钩子
activated
和deactivated
- 这个两钩子用于路由组件在
<keep-alive>
时激活状态和失活状态 activated
用于路由组件的激活状态触发deactivated
在路由组件失活状态触发
8. 路由的守卫
-
作用,对路由进行权限控制
-
分类:全局守卫,独享守卫,组件内守卫
-
全局守卫:
beforeEach
和afterEach
//每次路由切换前调用 router.beforeEach((to, from, next) => { let school = localStorage.getItem("school") if (to.meta.isAuth) { if (school === 'shanghai') { next() } else { next({ path: '/about' }) } } else { next() } }) //每次路由切换后调用 router.afterEach((to) => { if (to.meta.title) { document.title = to.meta.title;//修改页面的title } else { document.title = "CBD家居" //修改页面的title } })
-
独享路由守卫
{ path: "news", component: News, meta: { isAuth: true, title: '新闻' }, beforeEnter(to, from, next) { //某一个路由独享 let school = localStorage.getItem("school") if (to.meta.isAuth) { if (school === 'shanghai') { next() } else { next({ path: '/about' }) } } else { next() } } }
-
组件内的守卫就是进入守卫和离开守卫
beforeRouteEnter
和beforeRouteLeave
export default { name: "About", data() { return {}; }, beforeRouteEnter(to, from, next) { let school = localStorage.getItem("school"); if (to.meta.isAuth) { if (school === "shanghai") { next(); } else { alert("学校名不对"); } } else { next(); } }, };
-
不用的路由模式
-
Hash 模式路由有一个哈希符
#
-
HTML5 模式。这种路由需要在路由里配置一个属性
const router = new VueRouter({ mode: 'history',
-
-