上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
最新日志:
不错呦！smile@林凯西，确保“准备文件”中的几个文件都有安装，S...您好，看了您这篇帖子觉得很有帮助。但是有个问题想请...我的修改过了怎么还被恶意注册呢 @jjjjiiii 用PJ快9年了，主要是A...PJ3啊，貌似很少有人用PJ了，现在不是WP就是z...@332347365，我当时接入时错误码没有-10...楼主，ChkValue值应为-103是什么意思呢？...大哥 你最近能看到我发的信息，请跟我联系，我有个制...
Vue Router(路由)学习笔记
编辑:dnawo 日期:2022-04-26
Vue Router是Vue.js的官方路由插件。
一、引入Vue Router
复制内容到剪贴板
程序代码
程序代码<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-router@3"></script>
<script src="https://unpkg.com/vue-router@3"></script>
二、使用Vue Router
1、基本路由示例
复制内容到剪贴板 程序代码
程序代码<div id="app">
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const News = {template: '<div>这是新闻页。</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news', component: News}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const News = {template: '<div>这是新闻页。</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news', component: News}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>
说明：router-link为路由链接组件，最终转为<a>标签；router-view为路由视图组件，最终被模板内容代替。
2、动态路径参数路由示例
复制内容到剪贴板 程序代码
程序代码<div id="app">
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news/10/20">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const News = {template: '<div>这是新闻页。tid={{$route.params.tid}}&id={{$route.params.id}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news/:tid/:id', component: News}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news/10/20">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const News = {template: '<div>这是新闻页。tid={{$route.params.tid}}&id={{$route.params.id}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news/:tid/:id', component: News}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>
说明：Vue Router动态路径参数匹配语法：/:name1/:name2，参数值使用$route.params.name1、$route.params.name2获取。
3、查询参数路由示例
复制内容到剪贴板 程序代码
程序代码<div id="app">
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news?tid=10&id=20">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const News = {template: '<div>这是新闻页。tid={{$route.query.tid}}&id={{$route.query.id}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news', component: News}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news?tid=10&id=20">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const News = {template: '<div>这是新闻页。tid={{$route.query.tid}}&id={{$route.query.id}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news', component: News}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>
说明：Vue Router查询参数值使用$route.query.name1、$route.query.name2获取。
4、通配符(*)路由示例
复制内容到剪贴板 程序代码
程序代码<div id="app">
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const Page404 = {template: '<div>404 Not Found. {{$route.params.pathMatch}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '*', component: Page404}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const Page404 = {template: '<div>404 Not Found. {{$route.params.pathMatch}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '*', component: Page404}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>
说明：通配符(*)匹配值使用$route.params.pathMatch获取，本例用它实现404页面。
参考资料
[1].Vue Router官网：https://v3.router.vuejs.org/zh/
[2].Vue Router文档：https://v3.router.vuejs.org/zh/guide/
[3].Vue Router API：https://v3.router.vuejs.org/zh/api/
评论: 0 | 引用: 0 | 查看次数: 1584
发表评论
请登录后再发表评论！
