vue-router 的常见用法
一个完整的路由必须包含:路由链接和路由占位符、路由实例、路由规则链接的路由组件
1. 路由重定向
- 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。
- 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
2. 嵌套路由
通过路由实现组件的嵌套展示，叫做嵌套路由。
2.1 声明子路由链接和子路由占位符
在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：
2.2 通过 children 属性声明子路由规则
在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则：
3. 路由命名
- 为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。
//添加路由链接
//声明式导航
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
//编程式导航
router.push({ name: 'user', params: { id: 123 }})
//定义路由规则
const router = new VueRouter({
routes: [
{
path: '/user/:id',
name: 'user',
component: User
}
]
})
4. 动态路由与路由匹配
- 一个完整的路由必须包含:路由链接和路由占位符、路由实例、路由规则链接的路由组件
4.1 动态路由的概念
动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。
在 vue-router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：
4.2 $route.params 参数对象
在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值。
5. 路由传递参数和接收参数
<div id="app">
<router-link to="/user/1">User1</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
const User = {
//组件的props属性接收参数
props: ['id'],
//props: ['uname', 'age'],
//props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user'},
//props:true 开启传参
{ path: '/user/:id', component: User, props: true },
//传对象类型props: { uname: 'lisi', age: 20 }
//传函数类型props: route => ({ uname: 'zs', age: 20, id: route.params.id })
//params传值
{ path: '/search', component: SearchUser,props: route => ({ query: route.query.q })}
//query传值
]
})
6. 路由的懒加载
路由懒加载的应用场景:
-
首先, 我们知道路由中通常会定义很多不同的页面.
-
这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.
-
但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大
-
如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
-
如何避免这种情况呢? 使用路由懒加载就可以了
路由懒加载的作用:
- p路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
- 只有在这个路由被访问到的时候, 才加载对应的组件
6.1 路由懒加载的用法
在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
const Home = () => import('../components/Home.vue')
例如：
// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
// 原始路由加载
// import Home from '../components/Home'
// 路由懒加载(推荐)
const Home = () => imports('../components/Home')
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
const routes = [ // 在 routes 数组中,声明路由的匹配规则
{
// path 表示要匹配的 hash 地址,component 表示要展示的路由组件
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes,
mode: 'history',
linkActiveClass: 'active'
})
// 3.将router对象传入到Vue实例
export default router
7. 导航守卫(钩子函数)
我们可以利用beforeEach来完成标题的修改
-
首先，我们可以在钩子当中定义一些标题，可以利用mate来定义
-
其次，利用导航守卫修改我们的标题
导航钩子的三个参数解析：
- to：即将要进入的目标的路由对象
- from：当前导航即要离开的路由对象
- next：调用该方法后，才能进入下一个钩子
全局守卫示例:
- 如果是后置钩子，也就是afterEach，不需要主动调用next(）函数。
7.1 next函数的三种调用方式
- 当前用户拥有后台主页的访问权限，直接放行：
next() - 当前用户没有后台主页的访问权限，强制其跳转到登录页面：
next('/login') - 当前用户没有后台主页的访问权限，不允许跳转到后台主页：
next(false)
网友评论