引言 · 相关问题小结:
- RESTful模式?
- vue-router的安装和使用?
- 如何设计路由,才能完成View端的项目开发?
- vue.js项目的完整建立?
首先,在src/components/下建立相关的页面.vue文件,在全局路由配置文件src/router/index.js中引入或注册相关文件或组件;
看下文之前,我们先看一段代码:
// index.js 配置 ...省略... import MovieList from '@/components/movieList' ...省略... export default new Router({ routes: [ { path: '/movieList', component: MovieList } ] })
// src/components/ 相关文件配置 <template> <div> <p>movieList.vue</p> <p>电影列表页面</p> </div> </template>
浏览器效果图 · 查看地址: localhost:8080/#/movieList
一、动态路由匹配 (两种情况)
即:一个路由中设置一个(或多个)路径参数
- 对应的值都会设置到
$route.params
中; - 当用户访问时,也会自动匹配相关的路径。
- 除了
$route.params
之外,$route
对象还提供了其他有用的信息。例如:$route.query(如果URL中有查询参数)
、$route.hash
等。
A. 两种情况,代码对比:
- 一个路由中设置一个路径参数
// index.js 配置 export default new Router({ routes: [ { path: '/user/:username', // type1:动态路由(一个参数) component: User }, ] })
// src/components/ 相关文件配置 <template> <div> <p>User.vue</p> <p>用户页面,Hello {{ $route.params.username }}</p> </div> </template>
- 一个路由中设置多个路径参数
export default new Router({ routes: [ { path: '/user/:username/post/:post_id', // type1:动态路由(多个参数) component: User }, ] })
// src/components/ 相关文件配置 <template> <div> <p>User.vue</p> <p>用户页面,Hello {{ $route.params.username }} , {{ $route.params.post_id }}</p> </div> </template>
B. 两种情况,效果图对比:
C. 提醒 · 仔细体会:
- 当使用路由参数时,例如从
/user/David
导航到/user/Lucy
,原来的组件实例会被复用。- 因为:这两个路由都渲染同一个组件,比起销毁再创建操作,复用操作则更加高效。
- 不过,这也意味着组件的生命周期钩子不会再被调用。
- 如果复用组件时,想对路由参数的变化做出响应的话,可以简单地使用watch(监测变化)
$route
对象。
- 如果复用组件时,想对路由参数的变化做出响应的话,可以简单地使用watch(监测变化)
D. 优先级的问题:
二、嵌套路由
代码示下:
const VIP = { template:'' }
export default new Router({
routes: [
{
path: '/user/:id', //type2:嵌套路由
component: User,
children: {
path: 'vip',
component: VIP
}
}
]
})
浏览器效果 · 查看地址:
localhost:8080/#/user/2018/vip
注意:
如果把上图vip换成vip1,就看不到效果了,这也是它的实际用处之一。
以上就是关于“ vue.js路由配置vue-router的基础学习 - 概念篇 ” 的全部内容。