15 Vue动态路由以及Get传值

1.不同路由传值：动态路由

1.配置动态路由

routes:[
	 //动态路径参数 以冒号开头
	{ path: '/user/:id', component: User }
]

2.获取动态路由的值

在相应的页面中，使用> this.$routes.params获取动态路由的值

3.实例

在上篇文章中的完整代码中，进行完善。
News.vue:

<template>
	<div id="news">
		<h2>{{msg}}</h2>
		<ul>
			<li v-for="(item,key) in list">
				<router-link :to="'/content/'+key">{{key}}++++++{{item}}</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '这是一个新闻组件！',
				list: ['1111111','222222','3333333']
			}
		}
	}
</script>

<style>
</style>

Content.vue:

<template>
	<div id="content">
		我是详情页面
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '数据'
			}
		},
		mounted() {
			console.log(this.$route.params);  /*获取动态数值传值*/
		}
	}
</script>

<style>
</style>

main.js:

import Vue from 'vue';
import App from './App.vue';

//引入路由
import VueRouter from 'vue-router';
//使用路由
Vue.use(VueRouter);

//创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';

//配置路由
const routes = [
	{ path: '/home', component: Home },
	{ path: '/news', component: News },
	{ path: '/content/:aid', component: Content },  /*动态路由*/
	{ path: '/pcontent', component: Pcontent },
	{ path: '*', redirect: './home' }
]

//实例化VueRouter
const router = new VueRouter({
	routes  //缩写 相当于routes: routes
})

//挂载路由
new Vue({
  el: '#app',
	router,
  render: h => h(App)
})

运行效果:

2.Get方法传值

知识点：

<router-link :to="'/pcontent?aid='+key">{{key}}====={{item}}</router-link>

mounted() {
	// 获取get传值
	console.log(this.$route.query);
}

完整代码：
main.js:

import Vue from 'vue';
import App from './App.vue';

//引入路由
import VueRouter from 'vue-router';
//使用路由
Vue.use(VueRouter);

//创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';

//配置路由
const routes = [
	{ path: '/home', component: Home },
	{ path: '/news', component: News },
	{ path: '/content/:aid', component: Content },  /*动态路由*/
	{ path: '/pcontent', component: Pcontent },
	{ path: '*', redirect: './home' }
]

//实例化VueRouter
const router = new VueRouter({
	routes  //缩写 相当于routes: routes
})

//挂载路由
new Vue({
  el: '#app',
	router,
  render: h => h(App)
})

<template>
	<div id="pcontent">
		我是Pcontent组件
		<ul>
			<li v-for="(item,key) in list">
				<router-link :to="'/pcontent?aid='+key">{{key}}====={{item}}</router-link>
			</li>
		</ul>
	</div>
</template>	

<script>
	export default{
		data() {
			return {
				msg: '我是一个Pcontent组件',
				list: ['商品11111','商品2222222','商品3333333']
			}
		},
		mounted() {
			// 获取get传值
			console.log(this.$route.query);
		}
	}
</script>

<style>
</style>

运行结果：