vue路由的几种方式
1.子路由不要加/2.动态路径在这里插入图片描述在这里插入图片描述3.路由守卫进入守卫beforeRouteUpdate(动态路由发生变化的时候调用)beforeRouteUpdate(to,from,next){console.log(to)next()}离开守卫免战牌页面(404页面)4.编程式导航replace可以节省内存router(拿到方法或属性)history可以去掉#, 有坑(ngi
1.嵌套路由
要注意,以 / 开头的嵌套路径会被当作根路径。 子路由不要加/
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功,
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
})
2.动态路由
动态路由应用场景就是封装好的一个组件复用,然后匹配多个路径.
(1) 响应路由参数的变化
3.路由守卫
进入守卫
beforeRouteUpdate(动态路由发生变化的时候调用)
beforeRouteUpdate(to,from,next){
console.log(to)
next()
}
离开守卫
免战牌页面(404页面)
**什么是守卫:**简单来说就是我让你来才能来我让你走才能走
1.全局守卫
- 全局前置守卫
- 全局解析守卫
- 全局后置钩子
2.路由独享守卫(要晚于组件内部的守卫)
3.组件内的守卫
beforeRouteUpdata只有动态路由的时候调用
4.编程式导航
借助 router 的实例方法,通过编写代码来实现导航称为编程式导航
router.push(location, onComplete?, onAbort?)
注意: 这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
replace可以节省内存
router(拿到方法或属性)
history可以去掉#, 有坑(nginx找不到路径 会返回404)
history模式利用history.pushState API来完成URL跳转而无须重新加载页面
解决办法
5.命名路由
作用: 标识路由更加方便
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事:
router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径。
6.命名视图(一个路径显示多个组件)
有时候想同时 (同级) 展示多个视图,而不是嵌套展示
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s):
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
7.路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
使用 props 将组件和路由解耦:
取代与 $route 的耦合,通过 props 解耦
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
8.路由元信息
meta字段(元数据)
直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了
{
path: '/actile',
name: 'Actile',
component: Actile,
meta: {
login_require: false
},
},
{
path: '/goodslist',
name: 'goodslist',
component: Goodslist,
meta: {
login_require: true
},
children:[
{
path: 'online',
component: GoodslistOnline
}
]
}
这里我们只需要判断item下面的meta对象中的login_require是不是true,就可以做一些限制了
router.beforeEach((to, from, next) => {
if (to.matched.some(function (item) {
return item.meta.login_require
})) {
next('/login')
} else
next()
})
9.数据获取(导航之前获取数据,导航之后获取数据)
- 导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
- 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。
10.滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
11. 路由懒加载(必须依赖webpack,新能优化方法)
为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。
懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。
语法: const Foo= ()=>import(’./foo’)
更多推荐
所有评论(0)