Vue之url傳參
阿新 • • 發佈:2018-12-04
- 在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>