介绍
学习vue-router的一些学习笔记,所有笔记内容请看 vue-router学习笔记
重定向、别名
重定向通过routes配置完成,可以有如下三种方式:
const router = new VueRouter({
routes:[
{
path:'/a',
redirect:'/b' // /a 重定向到了/b
}
]
})
// 使用命名的路由进行重定向
const router = new VueRouter({
routes:[
{
path :'/a',
redirect:{name;'foo'}// 命名的路由进行重定向
}
]
})
// 使用函数动态返回重定向
const router = new VueRouter({
routes:[
{
path:'/a',
redirect:to=>{
// 方法接受目标路由作为参数,
// return 重定向的路由
}
}
]
})
示例如下:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '<router-view></router-view>' }
const Default = { template: '<div>default</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }
const WithParams = { template: '<div>{{ $route.params.id }}</div>' }
const Foobar = { template: '<div>foobar</div>' }
const FooBar = { template: '<div>FooBar</div>' }
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home,
children: [
{ path: '', component: Default },
{ path: 'foo', component: Foo },
{ path: 'bar', component: Bar },
{ path: 'baz', name: 'baz', component: Baz },
{ path: 'with-params/:id', component: WithParams },
// relative redirect to a sibling route
{ path: 'relative-redirect', redirect: 'foo' }
]
},
// absolute redirect
{ path: '/absolute-redirect', redirect: '/bar' },
// dynamic redirect, note that the target route `to` is available for the redirect function
{ path: '/dynamic-redirect/:id?',
redirect: to => {
const { hash, params, query } = to
if (query.to === 'foo') {
return { path: '/foo', query: null }
}
if (hash === '#baz') {
return { name: 'baz', hash: '' }
}
if (params.id) {
return '/with-params/:id'
} else {
return '/bar'
}
}
},
// named redirect
{ path: '/named-redirect', redirect: { name: 'baz' }},
// redirect with params
{ path: '/redirect-with-params/:id', redirect: '/with-params/:id' },
// redirect with caseSensitive
{ path: '/foobar', component: Foobar, caseSensitive: true },
// redirect with pathToRegexpOptions
{ path: '/FooBar', component: FooBar, pathToRegexpOptions: { sensitive: true }},
// catch all redirect
{ path: '*', redirect: '/' }
]
})
new Vue({
router,
template: `
<div id="app">
<h1>Redirect</h1>
<ul>
<li><router-link to="/relative-redirect">
/relative-redirect (redirects to /foo)
</router-link></li>
<li><router-link to="/relative-redirect?foo=bar">
/relative-redirect?foo=bar (redirects to /foo?foo=bar)
</router-link></li>
<li><router-link to="/absolute-redirect">
/absolute-redirect (redirects to /bar)
</router-link></li>
<li><router-link to="/dynamic-redirect">
/dynamic-redirect (redirects to /bar)
</router-link></li>
<li><router-link to="/dynamic-redirect/123">
/dynamic-redirect/123 (redirects to /with-params/123)
</router-link></li>
<li><router-link to="/dynamic-redirect?to=foo">
/dynamic-redirect?to=foo (redirects to /foo)
</router-link></li>
<li><router-link to="/dynamic-redirect#baz">
/dynamic-redirect#baz (redirects to /baz)
</router-link></li>
<li><router-link to="/named-redirect">
/named-redirect (redirects to /baz)
</router-link></li>
<li><router-link to="/redirect-with-params/123">
/redirect-with-params/123 (redirects to /with-params/123)
</router-link></li>
<li><router-link to="/foobar">
/foobar
</router-link></li>
<li><router-link to="/FooBar">
/FooBar
</router-link></li>
<li><router-link to="/not-found">
/not-found (redirects to /)
</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')
别名:
/a 的别名 /b 的意味着,当用户访问 /b 时,url会保持 /b,但是路由匹配则为 /a,就像是用户访问/a一样:
const router = new VueRouter({
routes:[
{
path:'/a',
component:A,
alias:'/b'
}
]
})
高级例子:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Root = { template: '<div>root</div>' }
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 Nested = { template: '<router-view/>' }
const NestedFoo = { template: '<div>nested foo</div>' }
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/root', component: Root, alias: '/root-alias' },
{ path: '/home', component: Home,
children: [
// 绝对重命名
// url中直接使用/foo就可以访问
{ path: 'foo', component: Foo, alias: '/foo' },
// 相对重命名
// 需要使用 ( /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: '' },
// nested alias
{ path: 'nested', component: Nested, alias: 'nested-alias',
children: [
{ path: 'foo', component: NestedFoo }
]
}
]
}
]
})
new Vue({
router,
template: `
<div id="app">
<h1>Route Alias</h1>
<ul>
<li><router-link to="/root-alias">
/root-alias (renders /root)
</router-link></li>
<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>
<li><router-link to="/home/nested-alias/foo">
/home/nested-alias/foo (renders /home/nested/foo)
</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')