木子屋
 

标题: 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.$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>
说明：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>
说明：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>
说明：通配符(*)匹配值使用$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)

 

登录

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms