<div> <h1>Named Routes</h1> <p>Current route name: {{ $route.name }}</p> <ul> <li><router-link :to="{ name: 'home' }">home</router-link></li> <li><router-link :to="{ name: 'foo' }">foo</router-link></li> <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li> </ul> <router-view></router-view> </div> <template> <div>This is Home</div> </template> <template> <div>This is Foo</div> </template> <template> <div>This is Bar {{ $route.params.id }}</div> </template>
const Home = { template: '#home' }; const Foo = { template: '#foo' }; const Bar = { template: '#bar' }; const router = new VueRouter({ routes: [ { path: 'https://www.jb51.net/', name: 'home', component: Home }, { path: '/foo', name: 'foo', component: Foo }, { path: '/bar/:id', name: 'bar', component: Bar } ] }); new Vue({ router:router }).$mount('#app');
六、命名视图：
<div> <router-link to="https://www.jb51.net/">Go to Foo</router-link> <router-view></router-view> <router-view></router-view> <router-view></router-view> </div> <template> <div>This is Foo</div> </template> <template> <div>This is Bar {{ $route.params.id }}</div> </template> <template> <div>This is baz</div> </template>
const Foo = { template: '#foo' }; const Bar = { template: '#bar' }; const Baz = { template: '#baz' }; const router = new VueRouter({ routes: [ { path: 'https://www.jb51.net/', components: { default:Foo, a:Bar, b:Baz } } ] }); new Vue({ router:router }).$mount('#app');
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: