一、 路由的基本配置
1. 在router->index.js中，配置一个懒路由，定义页面加载哪个组件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
// 配置一个懒路由,不然会加载页面下所有组件
const router = new VueRouter({
routes:[
{
path:'/home',
component:() => import('../views/Home.vue'),
}
]
})
export default router
2. 在App.vue中，通过router-view组件，引入这个router
<template>
<div id="app">
this is app
<!-- 显示定义的路由组件 -->
<router-view></router-view>
</div>
</template>
<style>
</style>
<script>
import MParent from './views/Parent.vue'
import bus from './util/bus'
import { RouterView } from 'vue-router';
export default{
data() {
},
components: {
MParent,
RouterView
},
methods: {
},
}
</script>注意，代码补全功能可以下载插件Auto Close Tag
二、路由的跳转
1. App.vue通过router-link跳转
<template>
<div id="app">
this is app
<router-link to="/home">home</router-link>
<!-- 显示定义的路由组件 -->
<router-view></router-view>
</div>
</template>
<style>
</style>
<script>
import MParent from './views/Parent.vue'
import bus from './util/bus'
import { RouterView } from 'vue-router';
export default{
data() {
},
components: {
MParent,
RouterView
},
methods: {
},
}
</script>2. App.vue通过编程式导航
App.vue中，不是通过router-link，而是通过button绑定this.$router函数
<template>
<div id="app">
this is app
<!-- 写一个按钮，跳转到home -->
<button @click="toHome">home</button>
<!-- 显示定义的路由组件 -->
<router-view></router-view>
</div>
</template>
<style>
</style>
<script>
import MParent from './views/Parent.vue'
import bus from './util/bus'
import { RouterView } from 'vue-router';
export default{
data() {
},
components: {
MParent,
RouterView
},
methods: {
// this.$router跳转，编程式跳转
toHome(){
this.$router.push({ path: '/home'})
}
},
}
</script>编程式导航传参：注意，此时router配置时，不能用动态路由
<template>
<div id="app">
this is app
<!-- 写一个按钮，跳转到home -->
<button @click="toHome">home</button>
<!-- 显示定义的路由组件 -->
<router-view></router-view>
</div>
</template>
<style>
</style>
<script>
import MParent from './views/Parent.vue'
import bus from './util/bus'
import { RouterView } from 'vue-router';
export default{
data() {
},
components: {
MParent,
RouterView
},
methods: {
// this.$router跳转，通过query传参，注意在index配置时，home后面不能是动态的：id这种
toHome(){
this.$router.push({ path: '/home', query:{name:'Jack'}})
}
},
}
</script>三、动态路由
基础搭建：
index.js:：在path后使用冒号标记url参数
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
// 配置一个懒路由,不然会加载页面下所有组件
// 动态路由，在home路径后面加个id，路径必须有id值，才能正确跳转，如：http://localhost:3333/#/home/1
const router = new VueRouter({
routes:[
{
path:'/home/:id',
component:() => import('../views/Home.vue'),
}
]
})
export default router
Home.vue : 在页面中，可以通过params获得参数内容
<template>
<div style="background-color: aquamarine;">
this is home
<h1>{{ $route.params.id }}</h1>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style> 
动态路由传参
App.vue中，toHome()跳转时指定name和params参数，注意name要和params搭配！！！！params是路径参数，内容是放在路径/后面的。之前的跳转，path和query搭配，query是变量，内容是放在路径？后面的
<template>
<div id="app">
this is app
<!-- 写一个按钮，跳转到home -->
<button @click="toHome">home</button>
<!-- 显示定义的路由组件 -->
<router-view></router-view>
</div>
</template>
<style>
</style>
<script>
import MParent from './views/Parent.vue'
import bus from './util/bus'
import { RouterView } from 'vue-router';
export default{
data() {
},
components: {
MParent,
RouterView
},
methods: {
// 动态路由传参,push中参数名为name和id,
// 注意： name 和 params 搭配！！！
toHome(){
this.$router.push({ name: 'home', params:{id:'18'}})
}
},
}
</script>在router中的index.js中，编辑路由，增加 name。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes:[
{
path:'/home/:id',
// 动态路由传参，根据name指定，需要多配置一个name
name:'home',
component:() => import('../views/Home.vue')
}
]
})
export default router
四、嵌套路由（没整成功） 不知道问题在哪儿
index.js 增加children
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes:[
{
path:'/home/:id',
// 动态路由传参，根据name指定，需要多配置一个name
name:'home',
component:() => import('../views/Home.vue'),
Children:[{
path:'/child',
component:() => import('../views/Child.vue')
}]
}
]
})
export default router
home.vue，增加router-view
<template>
<div style="background-color: aquamarine;">
this is home
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>五、导航守卫
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
//导航守卫，每次切换路由时触发
router.beforeEach((to, from, next)=>{
console.log(to.path)
next()
})
// Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
