vue.js中Vue-router 2.0基础实践教程
发布时间：2020-12-17 02:58:41 所属栏目：百科 来源：网络整理
导读：前言 Vue.js的一大特色就是构建单页面应用十分方便，既然要方便构建单页面应用那么自然少不了路由，vue-router就是vue官方提供的一个路由框架。本文主要介绍了Vue-router 2.0的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 一、基础用法： Hel
前言Vue.js的一大特色就是构建单页面应用十分方便，既然要方便构建单页面应用那么自然少不了路由，vue-router就是vue官方提供的一个路由框架。本文主要介绍了Vue-router 2.0的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 一、基础用法：Hello App!
this is foo! this is bar! 二、动态路由匹配：Hello App!
User:{{ $route.params.id }},Post:{{$route.params.post_id}} 三、嵌套路由：Hello App!
User:{{ $route.params.id }}<template id="userHome"> 主页 <template id="userProfile"> 概况 <template id="userPosts"> 登录信息 中
{ path: '',component: UserHome},// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的
四、编程式路由：Hello App!
User:{{ $route.params.id }}<template id="register"> 注册 //4.router.push(location)
router.push({ path: 'register',query: { plan: 'private' }}); 五、命名路由：Named Routes
Current route name: {{ $route.name }} This is Home
This is Foo
This is Bar {{ $route.params.id }}
const router = new VueRouter({
routes: [ { path: '/',name: 'home',component: Home },{ path: '/foo',name: 'foo',{ path: '/bar/:id',name: 'bar',component: Bar } ] }); new Vue({ router:router }).$mount('#app'); 六、命名视图：This is Foo
This is Bar {{ $route.params.id }}
This is baz
const router = new VueRouter({
routes: [ { path: '/',components: { default:Foo,a:Bar,b:Baz } } ] }); new Vue({ router:router }).$mount('#app'); 总结以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |