Vue 路由的嵌套

• Z时代
• 2024-01-10
• 分类：综合

路由的嵌套
　　1.配置路由
　　2.<router-view></router-view>

示例代码：

import Vue from 'vue'
import App from './App.vue'
import News from './components/News.vue'
import NewsList from './components/NewList.vue'
import NewsAdd from './components/NewsAdd.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
  path: '/news',
  component: News,
  children: [{
    path: 'list',
    component: NewsList
  },{
    path: 'add',
    component: NewsAdd
  }]
}]
const router = new VueRouter({
  routes
});
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

<template>
  <div id="app">
    App
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<style lang="scss">
</style>

<template>
    <div id="news">
        News组件
        <hr>
        <router-link :to="'/news/list'">列表</router-link>
        <router-link :to="'/news/add'">添加</router-link>
        <router-view></router-view>
    </div>
</template>

<template>
    <div id="newsadd">
        NewsAdd组件
    </div>
</template>

<template>
    <div id="newslist">
        NewsList组件
    </div>
</template>

以上是 Vue 路由的嵌套 的全部内容， 来源链接： utcz.com/z/379477.html