1.动态路由传值
在我这个项目里要实现的是从 News.vue 跳转到Content.vue
News.vue
<template>
<!-- 所有的内容要被根节点包含起来-->
<div id="news">
我是一个新闻组件
<br>
<ul>
<li v-for="(item,key) in list">
<router-link :to="'/content/'+key">{{key}}---{{item}}</router-link>
<!--<router-link to="/content/aid=123">{{key}}---{{item}}</router-link> 将aid写死 -->
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
msg:'我是一个news组件',
list:['111','222','333']
}
}
}
</script>
Content.vue （主要是第16行和第17行）
<template>
<div id="content">
我是详情页面
</div>
</template>
<script>
export default {
data(){
return{
msg:"数据"
}
},
mounted(){
console.log(this.$route.params);//获取动态路由传值
}
}
</script>
在main.js 中配置路由（第16行与第23行）
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//导入并使用
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';
//2.配置路由 注意，名字一定不能错
const routes = [ //若这里是 xxx，那么第25行应是 routers:xxx
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content/:aid', component: Content },/* 动态路由*/
{ path: '/pcontent', component: Pcontent },
{ path: '*', redirect: '/home' }//默认跳转路由
]
//3.实例化VueRouter 注意，名字一定不能错
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
//4.挂载路由
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
//5.根组件的模板里放上这句话 <router-view></router-view>
最后在控制台中你可以看到：
点了 key=2 的内容，获取了aid。
2.get传值
在这里我要实现的是从 Home.vue 跳转到 Pcontent.vue
Home.vue(主要为第8行)
<template>
<!-- 所有的内容要被根节点包含起来-->
<div id="home">
我是首页组件
<br>
<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:'我是一个home组件',
list:['商品111','商品222','商品333']
}
}
}
</script>
Pcontent.vue(主要是第18行)
<template>
<div id="pcontent">
商品详情
</div>
</template>
<script>
export default {
data(){
return{
msg:"数据",
}
},
mounted(){
//get传值
console.log(this.$route.query);
}
}
</script>
在main.js 中配置路由（第17行与第24行）
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//导入并使用
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';
//2.配置路由 注意，名字一定不能错
const routes = [ //若这里是 xxx，那么第25行应是 routers:xxx
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content/:aid', component: Content },/* 动态路由*/
{ path: '/pcontent', component: Pcontent },
{ path: '*', redirect: '/home' }//默认跳转路由
]
//3.实例化VueRouter 注意，名字一定不能错
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
//4.挂载路由
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
//5.根组件的模板里放上这句话 <router-view></router-view>
最后的效果是这样的：
为方便大家查看，我放上根组件和我的目录结构
这是App.vue 根组件
<template>
<div id="app">
<router-link to="/home">Go to Home</router-link>
<router-link to="/news">Go to News</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
/** 1不同路由传值，动态路由
*
*
* (1).配置动态路由
* routes:[
* // 动态路径参数 以冒号开头
* {path: '/user/:id',component:User}
* ]
*
* (2).在对应的页面
* this.$route.params 获取动态路由的值
*
*
* 2.get传值
*
*
* (1).配置动态路由
* routes:[
* // 动态路径参数 以冒号开头
* {path: '/user',component:User}
* ]
*
* (2).在对应的页面
* this.$route.query 获取动态路由的值
*
*/
export default {
name: 'App',
data(){
return{
msg:'你好vue'
}
}
}
</script>
<style>
</style>
目录结构
若有任何疑问或是不解请在下方评论，谢谢。