vue - router
嵌套路由
export default new VueRouter({
routes: [
path: '/about',
component: '...',
children: [
path: 'news',
component: '',
children: [
name: 'detail',
path: 'detail',
component: '',
]
]
]
})
注:子级路由不需要写/
/* 跳转路由要写全 */
<router-link to="/about/news/detail"></router-link>
/* 简写通过name属性进行跳转 */
<router-link :to="{name: 'detail'}"></router-link>
/* 使用<router-view />标签展示页面 */
路由传参
1. query
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<router-link :to="`/home/message?id=${}&title=${}`"></router-link>
<!-- 跳转路由并携带query参数,to的对象写法 -->
<router-link :to="{
path:'/home/message',
query:{
id,
title
}
}"></router-link>
2. params
需要修改路由配置,声明接收参数path: "detail/:id/:title"
<div id="app"></div>
<!-- 跳转路由并携带params参数,to的字符串写法 -->
<router-link :to="`/home/message/${}/${}`"></router-link>
<!-- 跳转路由并携带params参数,to的对象写法 -->
<router-link :to="{
name:'detail',
params:{
id,
title
}
}"></router-link>
注:携带params
参数时使用to的对象写法,只支持name
配置项,不支持path
3. 接收参数
直接接收参数:
$route.query.id
$route.params.id
使用props方式:
作用:让路由组件更方便的接收参数,在路由中配置
{
name: "",
path: 'detail/:id',
compoonent: '',
// 第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给组件
// props: { id: 99}
// 第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给组件
// props: true
// 第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给组件
props(route) {
return {
id: route.query.id
}
}
}
router-link的replace属性
- 作用:控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式:分别为
push
和replace
,push
是追加历史记录,replace
是替换当前记录。路由跳转时候默认为push
- 如何开启
replace
模式:<router-link replace to="">
编程式导航
this.$router.push({
name: 'xiangqing',
params: {
id,
title
}
})
this.$router.replace({
name: 'xiangqing',
params: {
id,
title
}
})
this.$router.forward() // 前进
this.$router.back() // 后退
this.$router.go() // 可前进可后退,传入数字
缓存路由组件
使用keep-alive
标签,嵌套router-view
标签
<!-- 缓存所有组件 -->
<keep-alive>
<router-view></router-view>
</keep-alive>
只缓存某个组件使用include=""
属性,属性值为组件名
<!-- include值为组件名,只缓存一个组件 -->
<keep-alive include="news"></keep-alive>
<!-- include值为组件名,缓存多个组件 -->
<keep-alive :include="['','','']"></keep-alive>
声明周期
路由独有的两个生命周期狗子,用于捕获路由组件的激活状态。
activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件失活了');
}
路由守卫
作用:对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
const routes = [
{
name: 'Home',
path: '/home',
component: '',
props: true,
meta: { isAuth: true, title: '主页' },
children: []
}
]
全局路由首位
// 全局前置路由守卫,初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from);
// 判断当前路由是否需要进行权限控制
if (to.meata.isAuth) {
// 权限控制的具体规则
if (localStorage.getItem('token')) {
next();
} else {
console.log('无权查看!');
}
} else {
next();
}
})
// 全局后置路由守卫,初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
console.log('后置路由守卫', to, from);
document.title = to.meata.title;
})
独享路由守卫
const routes = [
{
name: 'Home',
path: '/home',
component: '',
props: true,
meta: { isAuth: true, title: '主页' },
children: [],
beforeEnter: (to, from, next) => {
}
}
]
组件路由守卫
// 在组件中写
export default {
// 通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from, next) {
next();
},
// 通过路由规则,离开该组件时被调用
beforeRouteLeave(to, from, next) {
next();
}
}
路由模式
1. 对于一个url来说,什么是hash值? ——— #及其后面的内容就是hash值。
2. hash值不会包含在http请求中,即:hash值不会带给服务器
3. hash模式:
1. 地址中永久带着#号,不美观。
2. 若以后将地址通过第三方手机app分享,若app效验严格,则地址会被标记为不合法
3. 兼容性不好
4. history模式:
1. 地址干净,美观。
2. 兼容性和hash模式相比落差
3. 应用部署上线时需要配合后端人员支持,解决刷新页面服务器404的问题。
const router = new VueRouter({
mode: 'hash', // hash || history
base: process.env.BASE_URL,
routes
})
使用npm run build
进行打包。
配置后端koa服务器
可以使用connect-history-api-fallback
中间件。
npm install --save connect-history-api-fallback
const history = require('connect-history-api-fallback');
app.use(history); // 需要在配置静态资源前调用
-
目录导航
公告
昵称:默永
园龄:2年327天
注册时间:2021-11-15
当前在第:1页
总共:1条
搜索
精品文章 48小时阅读排行