本帖最后由 ing 于 2020-7-5 20:00 编辑
[Asm] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script>
const Home = { template: '<router-view></router-view>' };
const Foo = { template: '<div>foo</div>' };
const Baz = { template: '<div>baz</div>' };
const WithParams = { template: '<div>{{ $route.params.id }}</div>' };
const router = new VueRouter({
routes: [
{
path: '/', component: Home,
children:[
{ path: 'foo', component: Foo },
{ path: 'baz', name: 'baz', component: Baz },
{ path: 'with-params/:id', component: WithParams }
]
},
// dynamic redirect, note that the target route `to` is available for the redirect function
{ path: '/dynamic-redirect/:id?',
redirect: to => {
const { hash, query, params } = to;
if (hash === '#baz') {
return { name: 'baz', hash: '' }
}
if (query.to === 'foo') {
return { path: '/foo', query: null }
}
if (params.id) {
return '/with-params/:id'
} else {
return '/bar'
}
}
}
]
});
new Vue({
router,
template: '<router-view></router-view>'
}).$mount('#app')
</script>
</body>
</html> | 
发表于 2020-7-4 09:57
|
发表于 2020-7-4 09:58
