vue教程3-06 vue路由嵌套(多层路由)，路由其他信息

发布时间：2020-12-16 23:12:12 所属栏目：百科来源：网络整理

导读：多层嵌套： Document template id="home"gt; h3我是主页/h3 div a v-link="{path:'/home/login'}"gt;登录/a a v-link="{path:'/home/reg'}"gt;注册/a /div div router-view/router-view /div/templatetemplate id="news"gt; h3我是新闻/h3/templatescript sp

多层嵌套：

Document

<template id="home"&gt;
    <h3>我是主页</h3>
    <div>
        <a v-link="{path:'/home/login'}"&gt;登录</a>
        <a v-link="{path:'/home/reg'}"&gt;注册</a>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="news"&gt;
    <h3>我是新闻</h3>
</template>
<script>
    <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;1. 准备一个根组件</span>
    <span style="color: #0000ff;"&gt;var</span> App=<span style="color: #000000;"&gt;Vue.extend();

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;2. Home News组件都准备</span>
    <span style="color: #0000ff;"&gt;var</span> Home=<span style="color: #000000;"&gt;Vue.extend({
        template:</span>'#home'<span style="color: #000000;"&gt;
    });

    </span><span style="color: #0000ff;"&gt;var</span> News=<span style="color: #000000;"&gt;Vue.extend({
        template:</span>'#news'<span style="color: #000000;"&gt;
    });

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;3. 准备路由</span>
    <span style="color: #0000ff;"&gt;var</span> router=<span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; VueRouter();

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;4. 关联</span>

router.map({
'home':{
component:Home,subRoutes:{
'login':{
component:{
template:'我是登录信息'
}
},'reg':{
component:{
template:'我是注册信息'
}
}
}
},'news':{
component:News
}
});

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;5. 启动路由</span>
    router.start(App,'#box'<span style="color: #000000;"&gt;);

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;6. 跳转</span>

router.redirect({
'/':'home'
});

效果图：

路由其他信息:

/detail/:id/age/

{{$route.params </span>| json}}    -><span style="color: #000000;"&gt;  当前参数

{{$route.path}}    </span>-><span style="color: #000000;"&gt;  当前路径

{{$route.query </span>| json}}    ->  数据</pre>

Document

<template id="home"&gt;
    <h3>我是主页</h3>
    <div>
        <a v-link="{path:'/home/login/zns'}"&gt;登录</a>
        <a v-link="{path:'/home/reg/strive'}"&gt;注册</a>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="news"&gt;
    <h3>我是新闻</h3>
    <div>
        <a v-link="{path:'/news/detail/001'}"&gt;新闻001</a>
        <a v-link="{path:'/news/detail/002'}"&gt;新闻002</a>
    </div>
    <router-view></router-view>
</template>
<template id="detail"&gt;<span style="color: #000000;"&gt;
    {{$route.params </span>|<span style="color: #000000;"&gt; json}}
    </span><br><span style="color: #000000;"&gt;
    {{$route.path}}
    </span><br><span style="color: #000000;"&gt;
    {{$route.query </span>|<span style="color: #000000;"&gt; json}}
</span></template>
<script>
    <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;1. 准备一个根组件</span>
    <span style="color: #0000ff;"&gt;var</span> App=<span style="color: #000000;"&gt;Vue.extend();

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;2. Home News组件都准备</span>
    <span style="color: #0000ff;"&gt;var</span> Home=<span style="color: #000000;"&gt;Vue.extend({
        template:</span>'#home'<span style="color: #000000;"&gt;
    });

    </span><span style="color: #0000ff;"&gt;var</span> News=<span style="color: #000000;"&gt;Vue.extend({
        template:</span>'#news'<span style="color: #000000;"&gt;
    });

    </span><span style="color: #0000ff;"&gt;var</span> Detail=<span style="color: #000000;"&gt;Vue.extend({
        template:</span>'#detail'<span style="color: #000000;"&gt;
    });

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;3. 准备路由</span>
    <span style="color: #0000ff;"&gt;var</span> router=<span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; VueRouter();

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;4. 关联</span>

router.map({
'home':{
component:Home,subRoutes:{
'login/:name':{
component:{
template:'我是登录信息 {{$route.params | json}}'
}
},'news':{
component:News,subRoutes:{
'/detail/:id':{
component:Detail
}
}
}
});

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;5. 启动路由</span>
    router.start(App,'#box'<span style="color: #000000;"&gt;);

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;6. 跳转</span>

router.redirect({
'/':'home'
});

效果图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!