详解vue 命名视图
程序员文章站
2022-05-14 15:13:27
在views 创建 userprofile.vue userprofilepreview.vue文件
app.vue文件创建两个router-view :...
在views 创建 userprofile.vue userprofilepreview.vue
文件
app.vue文件创建两个router-view :
<router-view/> <router-view name="helper"/>
两个router-link
<router-link to="/">home</router-link> | <router-link to="/profile">profile</router-link>|
在router.js
import vue from 'vue'
import router from 'vue-router'
import home from './views/home.vue'
import userprofile from './views/userprofile.vue'
import userprofilepreview from './views/userprofilepreview.vue'
vue.use(router)
export default new router({
mode: 'history',
base: process.env.base_url,
routes: [
{ path: '/', name: 'home', component: home }, { path: '/profile', name: 'profile', components: { default: userprofile, helper: userprofilepreview } }
]
})
当在浏览器窗口访问我们的命名视图时候
<router-view/>
和<router-view name="helper"/>
分别展示了对应的组件
总结:命名视图优点在于一个页面中相当于多个窗口,这些窗口我们可以根据
<router-link to="/">home</router-link> | <router-link to="/profile">profile</router-link>|的不同来展示不同的视图
以上所述是小编给大家介绍的vue 命名视图及用法详解,希望对大家有所帮助
下一篇: Go语言实现钉钉发送通知