项目前导 学习笔记
一、匹配 404 错误
在路由规则中,*
代表的是任意字符。所以只要在路由的最后添加一个 *
路由,那么以后没有匹配到的url都会被导入到这个视图中。
<script>
...
var UserProfile = {template:"<h1>个人中心:{{$route.params.userid}}</h1>"};
var NotFound = {template: "<h1>您找的页面已经到火星啦!</h1>"}
var routes = [
{path: "/user/:userid",component: UserProfile},
// 上面的都匹配完了都找不到, 再返回 404, 所以放在最后
{path: "*",component: NotFound},
]
...
</script>
二、嵌套路由
有时候在路由中,主要的部分是相同的,但是下面可能是不同的。比如访问用户的个人中心是 /user/111/profile/
,查看用户发的贴子是 /user/111/posts/
等。这时候就需要使用到嵌套路由。
<script>
var index = Vue.extend({ template: "<h1>首页</h1>" })
var user = Vue.extend({
template:
`
<div>
<h1>个人中心</h1>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<router-link to="/user/123/message">信息</router-link>
</li>
<li role="presentation">
<router-link to="/user/123/setting">设置</router-link>
</li>
</ul>
<div class="container">
<!-- 注意这里也要有路由出口 -->
<router-view></router-view>
</div>
</div>
`
})
var message = Vue.extend({ template: "<h1>信息</h1>" })
var setting = Vue.extend({ template: "<h1>设置</h1>" })
var router = new VueRouter({
routes: [
{ path: "/", component: index },
{
path: "/user/:userid",
component: user,
children: [
// 这里的路径都是 /user:userid 下的, 所以不用写全
{ path: "message", component: message },
{ path: "setting", component: setting },
// 默认显示页面
{ path: "", component: message },
]
},
]
})
new Vue({
el: "#app",
router: router
});
</script>
三、编程式导航
之前使用 <router-link>
可以在用户点击的情况下进行页面更新。但有时候我们想要在 js
中手动的修改页面的跳转,这时候就需要使用编程式导航了。
想要导航到不同的 URL
,则使用 $router.push
方法。这个方法会向 history
栈添加一个新的记录(就是能实现页面前进后退功能),所以,当用户点击浏览器后退按钮时,则回到之前的 URL
。
当你点击 <router-link>
时,这个方法会在内部调用,所以说,点击 <router-link :to="...">
等同于调用 router.push(...)
。
<div id="app">
<button @click="goprev">上一步</button>
<button @click="gotoLis">列表</button>
<button @click="gotoProfile">个人中心</button>
<button @click="login">登录</button>
<button @click="gonext">下一步</button>
<router-view></router-view>
</div>
<script>
var lis = Vue.extend({ template: "<h1>列表</h1>" })
var profile = Vue.extend({ template: "<h1>个人中心{{$route.params.userid}}</h1>" })
var login = Vue.extend({ template: "<h1>登录</h1>" })
var router = new VueRouter({
routes: [
{path: "/lis", component: lis},
{path: "/profile/:userid", component: profile, name: "myprofile"},
{path: "/login", component: login},
]
});
new Vue({
el: "#app",
router: router,
methods: {
gotoLis(){
// 字符串 地址格式:/lis
this.$router.push("/lis")
},
gotoProfile(){
// 对象 地址格式:/profile/123
this.$router.push({ name: "myprofile", params:{userid:"123"} })
},
login(){
// 地址格式:/login?wd=SignIn
this.$router.push({ path: "login", query:{wd:"SignIn"} })
},
goprev(){
// 上一步
this.$router.go(1)
},
gonext(){
// 下一步
this.$router.go(-1)
}
}
});
</script>
router.replace(location, onComplete?, onAbort?)
跟 router.push
很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
四、命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。可以在创建 Router
实例的时候,在 routes
配置中给某个路由设置名称。
...
<!-- 注意 to 前面要有 : , 即 v-bind: -->
<router-link :to="{ name: 'user'">User</router-link>
...
...
var 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 }})
五、命名视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view
没有设置名字,那么默认为 default
。
<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):
Foo= Vue.extend({template:"<h1>Foo 部分</h1>"})
Bar= Vue.extend({template:"<h1>Bar 部分</h1>"})
Baz= Vue.extend({template:"<h1>Baz 部分</h1>"})
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
五、重定向和别名
- 重定向也是通过
routes
配置来完成,下面例子是从/a
重定向到/b
:
var article = Vue.extend({template:"<h1>我是文章列表</h1>"})
var router = new VueRouter({
routes: [
// redirect 重定向
{path:"/", redirect:"/article"},
{path:"/article", component: article},
]
})
- 重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
- 别名
“重定向” 的意思是,当用户访问/a
时,URL 将会被替换成/b
,然后匹配 路由 为/b
,那么 “别名” 又是什么呢?
/a
的别名是/b
,意味着,当用户访问/b
时,URL 会保持为/b
,但是路由匹配则为/a
,就像用户访问/a
一样。
// 上面对应的路由配置为:
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
更多内容请参考 vue-router 官方文档:https://router.vuejs.org/zh/