赞助商

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

发布时间:2019-04-02 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了vue教程3-06 vue路由嵌套(多层路由),路由其他信息脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

多层嵌套:

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>

<span style="color: #000000;"> router.map({
'home'<span style="color: #000000;">:{
component:Home,subRoutes:{
'login'<span style="color: #000000;">:{
component:{
template:'我是登录信息'<span style="color: #000000;">
}
},'reg'<span style="color: #000000;">:{
component:{
template:'我是注册信息'<span style="color: #000000;">
}
}
}
},'news'<span style="color: #000000;">:{
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>

<span style="color: #000000;"> router.redirect({
'/':'home'<span style="color: #000000;">
});

效果图:

路由其他信息:
/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>

<span style="color: #000000;"> router.map({
'home'<span style="color: #000000;">:{
component:Home,subRoutes:{
'login/:name'<span style="color: #000000;">:{
component:{
template:'我是登录信息 {{$route.params | json}}'<span style="color: #000000;">
}
},'news'<span style="color: #000000;">:{
component:News,subRoutes:{
'/detail/:id'<span style="color: #000000;">:{
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>

<span style="color: #000000;"> router.redirect({
'/':'home'<span style="color: #000000;">
});

效果图:

 

总结

以上是脚本之家为你收集整理的vue教程3-06 vue路由嵌套(多层路由),路由其他信息全部内容,希望文章能够帮你解决vue教程3-06 vue路由嵌套(多层路由),路由其他信息所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。