Vue之url传参

在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加上参数值

<template>
  <div id="root">
    <router-link to="/home">首页 \</router-link>
    <router-link to="about/001/vue">关于</router-link>
    <router-view></router-view>
  </div>
</template>

在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>

猜你喜欢