Vue之url传参

清疚 2022-04-18 04:17 455阅读 0赞

*  在router.js定义需要传递的参数

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue'
    import Error from './views/Error.vue'
    import About1 from './views/About1.vue'
    import About2 from './views/About2.vue'
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: "/",
          redirect: '/home'
        },
        {
          path: '/home',
          name: 'home',
          component: Home
        },
        {
          path: '/about/:id/:title',
          name: 'about',
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
          children:[
            {
              path: 'about1',
              component: About1
            },
            {
              path: 'about2',
              component: About2
            }
          ]
        },
        {
          path: '*',
          name: 'error',
          component: Error
        },
      ]
    })

*  在App.vue里的About的url加上参数值

*  在About.vue获取App.vue传递过来的参数值

<template>
      <div class="about">
        这是about组件
        <br>
        id:{
       {$route.params.id}} 
        <br>
        title:{
       {$route.params.title}}
        <br>
        {
       {msg}}
        <div>
          <router-link to="/about/about1">about1</router-link>
          <router-link to="/about/about2">about2</router-link>
          <router-view></router-view>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          msg: this.$route.params.id+this.$route.params.title
        }
      },
    }
    </script>