Vue中的router-view解释
在我们创建项目的时候,可以自然而然的发现,那就是在app.vue这个页面里面存在一个<router-view>的tag标签。通过它,我们点击链接,即可显示出Vue的HelloWorld.vue页面。那么,到底是什么让HelloWorld.vue页面显示出来,并且它的路由途径和特点呢?下面就一一来解释一下:本质,RouterView【命令视图】和Router...
·
在我们创建项目的时候,可以自然而然的发现,那就是在app.vue这个页面里面存在一个<router-view>的tag标签。通过它,我们点击链接,即可显示出Vue的HelloWorld.vue页面。
那么,到底是什么让HelloWorld.vue页面显示出来,并且它的路由途径和特点呢?
下面就一一来解释一下:
本质,RouterView【命令视图】和RouterLink【命令路线】本身是两个组件。
操作步骤分别为:
1、创建组件
2、命名路由
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
3、使用
完整操作步骤代码如下:
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/:id', 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-link></li>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')
命令视图:通常用在同时显示多个视图
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
没有name的视图,将default作为其名称,由于多个视图的性质,因此多个视图需要统一路径的多个组件。
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
嵌套命名:不同于非嵌套,它常常用于布局上
针对这种格局,我们通过对路由进行配置来实现上述布局:
{
path: '/settings',
// You could also have named views at the top
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
而,其中对settings.profile的<template>部分设置如下:
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>
更多推荐
所有评论(0)