vue-router2.0,子路由的使用
2016-11-11 10:47
671 查看
Redirect and Alias
Redirect
Redirecting is also done in theroutesconfiguration. To redirect from
/ato
/b:
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })
The redirect can also be targeting a named route:
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })
Or even use a function for dynamic redirecting:
const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // the function receives the target route as the argument // return redirect path/location here. }} ] })
For other advanced usage, checkout the example.
Alias
A redirect means when the user visits/a, and URL will be replaced by
/b, and then matched as
/b. But what is an alias?
An alias of
/aas
/bmeans when the user visits
/b, the URL remains
/b, but it will be matched as if the user is visiting
/a.
The above can be expressed in the route configuration as:
const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] })
An alias gives you the freedom to map a UI structure to an arbitrary URL, instead of being constrained by the configuration's nesting structure.
源码示例
app.js
import Vue from 'vue' | |
import VueRouter from 'vue-router' | |
Vue.use(VueRouter) | |
const Home = { template: '<div><h1>Home</h1><router-view></router-view></div>' } | |
const Foo = { template: '<div>foo</div>' } | |
const Bar = { template: '<div>bar</div>' } | |
const Baz = { template: '<div>baz</div>' } | |
const Default = { template: '<div>default</div>' } | |
const router = new VueRouter({ | |
mode: 'history', | |
base: __dirname, | |
routes: [ | |
{ path: '/home', component: Home, | |
children: [ | |
// absolute alias | |
{ path: 'foo', component: Foo, alias: '/foo' }, | |
// relative alias (alias to /home/bar-alias) | |
{ path: 'bar', component: Bar, alias: 'bar-alias' }, | |
// multiple aliases | |
{ path: 'baz', component: Baz, alias: ['/baz', 'baz-alias'] }, | |
// default child route with empty string as alias. | |
{ path: 'default', component: Default, alias: '' } | |
] | |
} | |
] | |
}) | |
new Vue({ | |
router, | |
template: ` | |
<div id="app"> | |
<h1>Route Alias</h1> | |
<ul> | |
<li><router-link to="/foo"> | |
/foo (renders /home/foo) | |
</router-link></li> | |
<li><router-link to="/home/bar-alias"> | |
/home/bar-alias (renders /home/bar) | |
</router-link></li> | |
<li><router-link to="/baz"> | |
/baz (renders /home/baz)</router-link> | |
</li> | |
<li><router-link to="/home/baz-alias"> | |
/home/baz-alias (renders /home/baz) | |
</router-link></li> | |
<li><router-link to="/home"> | |
/home (renders /home/default) | |
</router-link></li> | |
</ul> | |
<router-view class="view"></router-view> | |
</div> | |
` | |
}).$mount('#app') |
相关文章推荐
- Vue-Router2.0使用1
- 饿了么项目---3、vue-router 2.0版本的使用
- vue2.0使用vue-router
- vue.js中的路由vue-router2.0使用
- Vue2.0插件之一:使用vue-router插件
- Vue-router路由2.0的使用
- vue-router(2.0)之什么是路由以及使用步骤(笔记)
- vue-router路由的基础使用
- Vue2.0使用总结中......
- vue(2.0)+vue-router(2.0)+vuex(2.0)实战
- Vue 爬坑之路(三)—— 使用 vue-router 跳转页面
- vue2.0填坑之--不显示router-view
- 使用vue2.0 vue-router vuex 模拟ios7操作
- 使用Vue.js 2.0搭建单页应用:从构建到部署
- VueJs路由跳转――vue-router的使用详解
- Vue 2.0 使用图片懒加载插件
- vue-router2使用
- webApp路由控制-vue-router2.0
- Vue2.0+vue-router实现简易豆瓣电影webApp
- 使用 Vue 2.0 实现服务端渲染的 HackerNews