main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router, // 相当于 router: router, 在创建Vue实例的时候使用router属性为其创建一个路由
}).$mount('#app')
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import List from './components/List.vue'
import UC from './components/UserCenter.vue'
import C from './components/Cart.vue'
import HHY from './components/Happy.vue'
import LD from './components/LaoDi.vue'
import K from './components/K.vue'
import Detail from './components/movies/Detail.vue'
Vue.use(VueRouter); // 通过Vue.use全局使用组件
// 建议使用name进行跳转
const router = new VueRouter({
// routes 表示路由配置信息,路由表
routes: [{
path: '/h', // 表示路由地址,此地址在浏览器中的地址栏中进行输入
component: Home, // 路由地址对应的组件
// 在做路由嵌套的时候可以使用children属性实现
// 里面跟着一个数组
children: [{
path: '/user', // 此处的path如果加了/,name整个地址都会被替换
component: UC,
name: 'UC'
}, {
path: '/cart',
component: C,
name: 'C'
}, {
path: 'happy', // 此种path会在父路由path的后面拼接当前地址
component: HHY,
name: 'HHY',
children: [{
path: 'laodi',
component: LD,
name: 'LD'
}, {
path: '98k',
component: K,
name: 'K'
}
]
}]
}, {
path: '/l',
component: List,
name: 'List',
}, {
/*
vue-router页面传递参数的两种常见方式
使用params传参
需要在路由表中做配置,如果不在路由中进行配置也可以进行传递
在router-link中设置需要传递的参数
如果使用to+path进行跳转,需要传递的参数是必须在路由表中进行配置
如果使用:to绑定一个对象传递参数 那么多余的参数可以不用进行配置直接传递
在获取参数的时候使用this.$route.params进行获取
或者this.$route.query获取url中传递的参数?形式分割的
使用query传参,query中的参数直接在url中进行拼接以?形式
*/
path: '/l/:id', // 路由传参 :id 表示路由中传递的参数的名字
component: Detail,
name: 'MovieDetail'
}]
})
export default router;
传参
<template>
<div class="list">
<div class="r">
<h5>使用name跳转传参</h5>
<!-- 使用params传参的时候需要注意参数的名字 -->
<router-link
:to="{ name: 'MovieDetail', params: { id: movie.id, name: movie.name } }"
class="movie-link"
v-for="movie in list" :key="'1-'+movie.id">{{movie.name}}</router-link>
</div>
<div class="r">
<h5>使用path跳转传参</h5>
<router-link
:to="{ path: `/l/${movie.id}` }"
class="movie-link"
v-for="movie in list" :key="'2-'+movie.id">{{movie.name}}(使用path跳转)</router-link>
</div>
<div class="r">
<h5>使用query传参</h5>
<!--
query中的参数直接在url中进行拼接 以?
-->
<router-link
:to="{
name: 'MovieDetail',
params: { id: movie.id, name: movie.name },
query: { t: Date.now(), a: movie.id }
}"
class="movie-link"
v-for="movie in list" :key="'3-'+movie.id">{{movie.name}}</router-link>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [{
id: 1,
name: '原始时代',
}, {
id: 2,
name: '流浪地球',
}, {
id: 3,
name: '惊奇队长',
}, {
id: 4,
name: '复仇者联盟4'
}, {
id: 5,
name: '蜘蛛侠-英雄远征'
}]
}
}
}
</script>
<style scoped>
.movie-link {
margin: 0.5rem 1rem;
color: #999;
}
.r {
border: #999 solid 1px;
padding: 1rem;
}
</style>
Detail.js
<template>
<div class="movie">
传递的参数为{{id}}
</div>
</template>
<script>
export default {
data() {
return {
id: '',
};
},
created() {
console.log(this.$route) // 获取当前的路由信息
console.log(this.$router)
this.id = this.$route.params.id
// this.$route.params 获取通过params传递的参数
// this.$route.query 获取通过url传递的参数
},
}
</script>