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

多层嵌套：

<Meta charset="UTF-8"> Document

Box">

<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,'#<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>'<span style="color: #000000;"&gt;);

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;6. <a href="https://www.jb51.cc/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a></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>

<Meta charset="UTF-8"> Document

Box">

<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,'#<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>'<span style="color: #000000;"&gt;);

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;6. <a href="https://www.jb51.cc/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a></span>

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

效果图：

4034333b5.png" alt="">

原文链接：https://www.f2er.com/vue/403295.html

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

猜你在找的Vue相关文章