深入简出vue路由——2.路由动态匹配

最新推荐文章于 2024-05-16 11:26:16 发布

Leon_94

最新推荐文章于 2024-05-16 11:26:16 发布

阅读量305

点赞数

分类专栏： vue路由系列-学习笔记文章标签： vue vue-router

本文链接：https://blog.csdn.net/sinat_36422236/article/details/79239800

版权

vue路由系列-学习笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

同样直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/boo">/user/foo</router-link>
  </p>  
  <router-view></router-view>
</div>
<script type="text/javascript">
  const UserFoo = {
    template:`<h2>{{$route.params.id}}</h2>`
  }
  const UserBoo = {
    template:`<h2>{{$route.params.id}}</h2>`
  }
  const router = new VueRouter({
    routes:[
      {
        path:'/user/:id',// 动态路径参数 以冒号开头
        component:UserFoo,
      },{
        path:'/user/:id',// 动态路径参数 以冒号开头
        component:UserBoo
      }
    ]
  })
  const app = new Vue({
    router//ES6解构函数的写法相当于 router：router
  }).$mount('#app')
</script>
</body>

</html>

这里写图片描述

Leon_94

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深入简出vue路由——2.路由动态匹配

同样直接上代码html lang="en">head> meta charset="UTF-8"> title>Documenttitle> script src="https://unpkg.com/vue/dist/vue.js">script> script src="https://unpkg.com/vue-router/dist/vue-router.js
复制链接

扫一扫