vue嵌套路由（子路由）

最新推荐文章于 2024-06-19 19:56:24 发布

脚下留心

最新推荐文章于 2024-06-19 19:56:24 发布

阅读量172

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_38190467/article/details/99637604

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了使用Vue.js进行路由配置和组件管理的方法，包括如何导入和使用Vue-router，设置不同路径对应的不同组件，以及子路由的配置。通过具体代码示例展示了如何在页面中使用router-link导航和router-view展示组件。

摘要由CSDN通过智能技术生成

一路由在这里插入图片描述 import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
import Login from ‘@/components/Login’
import GoodsList from ‘@/views/GoodsList’
import Title from ‘./…/views/Title’
import Image from ‘@/views/Image’
Vue.use(Router)

export default new Router({
routes: [
/{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
},
{
path: ‘/Login’,
name: ‘Login’,
component: Login
},/
{
path: ‘/goodsList’,
name: ‘GoodsList’,
component: GoodsList,
children:[
{
path: ‘title’,
name: ‘title’,
component: Title
},{
path: ‘image’,
name: ‘image’,
component: Image
}
]
}
]
})
二. 在这里插入图片描述

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>goodslist</h2>
    <router-link to="/goodsList/title">显示商品标题</router-link>
    <router-link to="/goodsList/image">显示图片</router-link>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>