vue路由----url传值

最新推荐文章于 2024-01-04 14:04:53 发布

跳跳呦�

最新推荐文章于 2024-01-04 14:04:53 发布

阅读量324

点赞数

分类专栏： Vue 文章标签： vue路由 Url传值

本文链接：https://blog.csdn.net/weixin_44010187/article/details/95080732

版权

Vue 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

1.在idea中新建vue项目

2.main.js中修改

import Vue from 'vue'
// import Router from './Router'     /*引用自同级Router.js*/
// import Router from './SonRouter'     /*引用自同级SonRouter.js*/
// import Router from './ComponentRouter'     /*引用自同级ComponentRouter.js*/
import Router from './UrlRouter'

在这里插入图片描述

3.src下新建文件UrlRouter.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  mode:'history',
  base:__dirname,
  routes:[
    {path:'/'},
    {path:'/params/:aaa/:bbb'},   // :表示绑定的意思
    {path:'/parame-regex/:id(\\d+)'}   //正则表达式绑定，只能是数字的时候生效，字母不起作用
  ]
})

new Vue({
  router,
  template:`
    <div>   <!--必须有外层根div-->
        <h1>Good Morning</h1>
        <ul>
            <li><router-link to="/">/</router-link></li>
            <li><router-link to="/params/111/222">/params/111/222</router-link></li>
            <li><router-link to="/parame-regex/222">/parame-regex/222</router-link></li>
        </ul>
        <p>Show</p>
        <pre><code>
          {{$route.params.aaa}}
          {{$route.params.id}}
          {{JSON.stringify($route,null,2)}}
        </code></pre>
    </div>
  `
}).$mount('#app')

运行结果：
在这里插入图片描述