Vue-Router 路由传参

by logan70

HTML

<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

<div id="app">
  <h1>Vue-Router 路由传参</h1>
  <p>在传参页内无法再次传参，因为匹配路由没变，路由并不会更新，需要返回主页重新传参</p>
  参数1<input type="text" v-model="param1">  
  参数2<input type="text" v-model="param2">
  <br>
  <button @click="$router.push({name: 'home'})">返回主页</button>
  <button @click="$router.push({name: 'param', params: {param1: param1, param2: param2}})">自定义传参</button>
  <br>
  <router-link :to="{name: 'home'}">主页</router-link>
  <router-link :to="{name: 'param',params:{param1: '参数1', param2: '参数2'}}">默认传参</router-link>
  <p>
    <!-- 路由导航，to属性决定导航地址 -->
    <!-- router-link编译后默认渲染为a标签 -->
  </p>
  <!-- 路由渲染出口 -->
  <router-view></router-view>
</div>

JavaScript

const Home = {template: `
	<div>
  	<p>主页（Home组件）</p>
  </div>
`}
const Param = {template: `
	<div>
  	<p>传参页（Param组件）</p>
  	<p>接收的参数1为：<b>{{$route.params.param1}}</b></p>
  	<p>接收的参数2为：<b>{{$route.params.param2}}</b></p>
  </div>
`}

const router = new VueRouter({
  routes : [
    {path: '/home',component: Home, name: 'home'},
    {path: '/param',component: Param, name: 'param'},
    {path: '/',redirect: {name: 'home'}}
  ]
})


window.vueApp = new Vue({
  router,
  data() {
  	return {
    	param1: '参数1',
      param2: '参数2'
    }
  }
}).$mount('#app')