vue-router菜鸟进阶!(嵌套路由VS命名路由)
2017-11-09 16:38
1111 查看
嵌套路由
一个被渲染组件可以包含自己的嵌套< router-view >。要在嵌套的出口中渲染组件,需要在VueRouter的参数中使用children配置:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <p> <router-link to="/user/foo">/user/foo</router-link> <router-link to="/user/foo/profile">/user/foo/profile</router-link> <router-link to="/user/foo/posts">/user/foo/posts</router-link> </p> <router-view></router-view> </div>
const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` } const UserHome = { template: '<div>Home</div>' } const UserProfile = { template: '<div>Profile</div>' } const UserPosts = { template: '<div>Posts</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ // UserHome will be rendered inside User's <router-view> // when /user/:id is matched { path: '', component: UserHome }, // UserProfile will be rendered inside User's <router-view> // when /user/:id/profile is matched { path: 'profile', component: UserProfile }, // UserPosts will be rendered inside User's <router-view> // when /user/:id/posts is matched { path: 'posts', component: UserPosts } ] } ] }) const app = new Vue({ router }).$mount('#app')
要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。可以在创建Router实例的时候,在routes配置中给某个路由设置名称。const router = new VueRouter({ routes: [ { path: '/user/:user:id', name: 'user', component: User } ] })
要链接到一个命名路由,可以给router-link的to属性传一个对象:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
跟代码调用 router.push()是一回事:
router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到/user/123路径。
For example:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const Home = { template: '<div>This is Home</div>' } const Foo = { template: '<div>This is Foo</div>' } const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' } const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/', name: 'home', component: Home }, { path: '/foo', name: 'foo', component: Foo }, { path: '/bar', name: 'bar', component: Bar } ] }) new Vue({ router, template: ` <div id="app"> <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-l 4000 ink></li> </ul> <router-view class="view"></router-view> </div> ` }).$.mount('#app')
相关文章推荐
- vue-router菜鸟进阶!(路由组件传参 vs H5 History模式)
- vue-router 之命名路由
- vue从入门到进阶:vue-router路由功能(九)
- 讲解vue-router之什么是嵌套路由
- 讲解vue-router之命名路由和命名视图
- 详解vue-router 命名路由和命名视图
- vue基础动态路由,嵌套路由router-link切换
- Vue--router-->>项目多路由嵌套--常用
- vue-router: 嵌套路由
- vue-router中定义动态路由、嵌套路由,并动态获取参数
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
- vue-router:嵌套路由的使用方法
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- vue-router: 嵌套路由
- vue + vue-router路由视图命名+路由嵌套
- Vue 之 vue-router 路由嵌套不显示问题
- Vue-router嵌套路由的使用
- vue-router: 嵌套路由
- vue-router -- 命名路由和命名视图
- vue.js路由vue-router(二)——路由进阶