欢迎光临

木子屋

标题: Vue Router(路由)学习笔记

作者: dnawo

日期: 2022-04-26 10:28 PM

分类: 脚本语言

内容:
Vue Router是Vue.js的官方路由插件。
一、引入Vue Router
复制内容到剪贴板 程序代码<script src="https://unpkg.com/vue@2"></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.('#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={{.params.tid}}&id={{.params.id}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news/:tid/:id', component: News}
]
});
const app = new Vue({router});
app.('#app');
</script>
说明：Vue Router动态路径参数匹配语法：/:name1/:name2，参数值使用.params.name1、.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={{.query.tid}}&id={{.query.id}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news', component: News}
]
});
const app = new Vue({router});
app.('#app');
</script>
说明：Vue Router查询参数值使用.query.name1、.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. {{.params.pathMatch}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '*', component: Page404}
]
});
const app = new Vue({router});
app.('#app');
</script>
说明：通配符(*)匹配值使用.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)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.367 ms

返回

标题: Vue Router(路由)学习笔记

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.367 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.383 ms

返回