一、配置
https://www.cnblogs.com/xxr0218/p/13534571.html
其中index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes: [{
path: '/home',
name: 'home',
component:()=>import('@/views/home.vue')
}]
})
main.js
import Vue from 'vue'
import App from './App.vue'
import router from '../router/index.js'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
home.vue就随便写点什么
然后再App.vue中写入<router-view></router-view>
输入路径http://localhost:8080/#/home
成功
二、路由跳转
1.<router-link></router-link>
在App.vue下
点击home即可跳转
2.编程式导航
定义一个按钮
<button @click="toHome">home</button>
toHome方法:
toHome(){
this.$router.push({
path:'/home'
})
}
点击按钮即可跳转
三、动态路由(传参)
应用场景:根据商品id的不同,显示不同的详情页
在路由文件下
export default new VueRouter({
routes: [{
path:'/home/:id', //:id 绑定
component:()=>import('@/views/home.vue')
}]
})
home.vue下
<template>
<div>
this is home
<h1>{{$route.params.id}}</h1>
</div>
</template>
这时在地址栏home后面加上/123时
/456时
编程式导航下的传参
在toHome方法中加入
toHome(){
this.$router.push({
path:'/home',
query:{
name:'Jack'
}
})
},
此时再点击home