开始
- 引入vue和
vue-router
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
const app = new Vue({
router
}).$mount('#app')
动态路由匹配
案例：即使路由中，某些值不同，但是可能还是需要使用同一路由
| 模式 | 匹配路径 |
|---|---|
| /user/:username | /user/evan |
| /user/:username/post/:post_id | /user/evan/post/123 |
// 此处模板字符中参数，是和path相关联的组件
// 通过 $route.params.username 获取，还有 $route.hash,$route.query
const User = {
template: `<p>{{ $route.params.username }}</p>`
}
// 通过动态路由，不同的路由可以跳转相同的页面
const routes = [
{
path: '/user/:username',
component: User
}
]
const router = new VueRouter({
routes
});
const vm = new Vue({
router
}).$mount('#app');
关于 router，routes， route
- 路由配置的时候使用的是
routes - vm 上挂载时使用的是
router - 在组件中获取路由对象
$route
响应路由参数的变化
- 当使用路由参数时，从
/user/foo导航到user/bar，原来的组件实例会被复用。但是，组件生命周期的钩子函数将不会被调用，此时，要对路由参数的变化做出响应，可以使用watch在组件中监视$route
const user = {
template: '<p> $route.params.username </p>',
watch: {
'$route' (to,from) {
}
}
}
- 还可以使用，
beforeRouteUpdate监听
// 具体的使用，之后有详细介绍
const user = {
template: '<span>{{ $route.param.user }}</span>',
beforeRouteUpdate: function (to,from,next) {
// 响应路由变化，不要忘了用next()方法
}
}
嵌套路由
有事在模板中依旧会有
router-view元素，即嵌套路由
- 模板大致是这样的
<div id="app">
<router-view></router-view>
</div>
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
- 因此在配置路由的时候，需要使用新项，children。当
/user/foo的时候，如果想要被嵌套的路由也有所显示，需要进行配置。
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
// 当/user/:id匹配成功，userHome 会显示在 User 的 router-view 中
// 如果没有配置该项，被嵌套的路由是不会渲染任何东西的
path: '',
component: UserHome
}
]
}
]
编程式导航
编程式导航是在Vue实例中使用
this.$router对象，注意使用的不是在组件中使用的$route
- 导航一共有三种方式
this.$router.push()this.$router.replace()this.$router.go()
- push 和 replace 的参数相同，方式稍有不同
- path，字符串,当有path时，params不起作用
- name，字符串，结合params使用，需要在定义路由的时候加上
name - params，对象
- query，对象
// 使用模板字符串结合变量
router.push({ path: `/user/${userId}` })
// /home?username=yf&userId=19
router.push({
path:'home',
params: {
username: 'yf',
userId: 19
}
});
router.replace(location)
router.go(n)
命名路由
使用命名路由，方便使用
// 定义的时候使用命名路由
const router = new VueRouter({
routes:[
{
path: '/user/:userId',
// 定义的时候加上 name
name: 'user',
component: User
}
]
})
// 链接的时候使用命名路由
router.push({name:'user',params: { userId: 123 }});
<!--链接的时候使用命名路由-->
<router-link to='{name:"user",params:{userId: 123}}'></router-link>
命名视图
命名视图使用的场景，当一个页面中有多个
router-view，是并列关系。比如，页面中左边的导航栏有一个router-view,右边显示部分有一个router-view。那么，需要为每个router-view添加一个name。同时，routes中component选项需要改变components
const routes = [
{
path: '/',
components: {
// 路由没有起名字的，默认为 default
default: Foo,
// 有名字的
routerViewA: Bar
}
}
]
重定向和别名
当访问某个页面，需要重定向的时候。别名，当路由是
/b，地址栏上也确实是这个时，但实际上可能访问的是/a
// 重定向
const routes = [
{
path: '/a',
redirect: '/b'
// redirect: {name:'user'}
// redirect: oldPath => 处理之后返回新地址
}
]
// 别名
const routes = [
path: '/a',
alias: '/b'
]
HTML5 History
- ajax无法使用前进后退按钮还原状态，但是h5通过
pushState（无刷新）实现。将一个特定的url推送到历史记录中，通过后退键，使得页面恢复到没有发送ajax请求前的状态 - 更多的操作需要在后台配置，官网上提供了各种后台的写法
- 前台只是添加一个属性
mode
