1. Basic configuration of routing
1. In router->index.js, configure a lazy route to define which component the page loads
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. In App.vue, introduce this router through the router-view component
<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>Note that the code completion function can download the plug-in Auto Close Tag
Second, the routing jump
1. App.vue jumps through 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 through programmatic navigation
In App.vue, instead of router-link, bind this.$router function through button
<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>Programmatic navigation parameter transfer: Note that dynamic routing cannot be used when router is configured at this time
<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>3. Dynamic routing
Basic construction:
index.js:: mark url parameters with a colon after path
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 : In the page, the parameter content can be obtained through 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> 
Dynamic routing parameters
In App.vue, when toHome() jumps, specify the name and params parameters. Note that the name must match the params! ! ! ! params is a path parameter, and the content is placed after the path /. In the previous jump, path and query are matched, query is a variable, and the content is placed in the path? Back
<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>In index.js in router, edit the route and add 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
4. Nested routing (unsuccessful) I don’t know where the problem is
index.js add 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, add 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>Five, navigation guard
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')