Vue（二十）VueRouter嵌套路由

文子阳

已于 2022-05-25 23:05:09 修改

阅读量133

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-05-21 13:43:41 首次发布

本文链接：https://blog.csdn.net/wenxingchen/article/details/124897375

版权

vue 专栏收录该内容

101 篇文章 24 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./static/js/vue.js"></script>
    <script src="./static/js/vue-router.js"></script>
    <script src="./static/js/httpVueLoader.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>

    <!--路由匹配到的组件将会被渲染到这里-->
    <router-view></router-view>
</div>

</body>
<script>
    <!--  命名全部小写、或者下划线隔开，【中划线或驼峰会报错】  -->
    const About = httpVueLoader('./static/components/About.vue')
    const Main = httpVueLoader('./static/components/Main.vue')
    const A = httpVueLoader('./static/components/A.vue');
    const B = httpVueLoader('./static/components/B.vue');

    new Vue({
        name:'index',
        el: '#app',
        data: {},

        //路由对象
        router: new VueRouter({
            routes: [
                {
                    path: '/',
                    component: Main
                },
                {
                    path: '/about',
                    component: About,
                    children: [
                        {
                            //子路由path不能带/，否则代表根路径
                            //此组件会被渲染到parent组件的<router-view>标签中
                            path: 'a',
                            component: A
                        },
                        {
                            path: 'b',
                            component: B
                        }
                    ]
                }
            ]
        })
    })
</script>
</html>

<template>
  <div>
    {{ message }}
    <br>
    <router-link to="/about/a">GO to A</router-link>
    <router-link to="/about/b">GO to B</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

module.exports = {
  name: 'About',
  data() {
    return {
      message: '组件：关于页面'
    };
  },
}
</script>

<style scoped>

</style>

文子阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue（二十）VueRouter嵌套路由

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./static/js/vue.js"></script> <script src="./static/js/vue-router.js"></script> .
复制链接

扫一扫