vue——37-路由-路由的嵌套（children）及 v-for 绑定的 li 的 id 路由地址

最新推荐文章于 2024-07-07 20:15:00 发布

肖ZE

最新推荐文章于 2024-07-07 20:15:00 发布

阅读量1.6k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/lucky541788/article/details/83110770

版权

vue 专栏收录该内容

74 篇文章 0 订阅

订阅专栏

在这里插入图片描述
html

<div id="app">
    <router-link to="/account">Account</router-link>
    <router-view></router-view>
</div>

<template id="tmp1">
    <div>
        <h1>这是 Account 组件</h1>
        <!--
        注意：像 v-for 循环的 li 点击，靠动态 item.id 区别
        则用 v-bind 绑定
        :to = "'/account/login' + item.id"
        同时路径也改变（子路由也可以用下面方式并行与父路由，不用 children）
        {path:"/account/login/:id", component: login}
        将 url 传过来的 id 值挂载，方便调用
        id:this.$route.params.id
        -->
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <!-- 不推荐，不方便用户理解url地址 -->
        <!--<router-link to="/login">登录</router-link>-->
        <!--<router-link to="/register">注册</router-link>-->
        <router-view></router-view>
    </div>
</template>

        let account = {
            template: '#tmp1'
        };

        let login = {
            template: '<h2>我是登录！</h2>'
        };

        let register = {
            template: '<h2>我是注册！</h2>'
        };

        let router = new VueRouter({
            routes: [
                {
                    path: '/account',
                    component: account,

                    //在 router-link 中指定了路径，所有下面的子路径前面不加 '/'
                    //否则永远以根路径开始请求，不方便用户理解url地址
                    children: [
                        //推荐，跟路由url后缀为 #/account/register
                        {path: 'login', component: login},
                        {path: 'register', component: register},

                        //不推荐，根路径url后缀为 #/register
                        // {path: '/login', component: login},
                        // {path: '/register', component: register}
                    ]
                }
            ]
        });

        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        });