基础知识系列（十三）：Vue2的vue-router的基本使用

在App.vue中，写

<template>
  <div>
    <!-- 
    <router-link to="/home?key=home"><button>去到Home</button></router-link>
    <router-link to="/about?key=about"><button>去到About</button></router-link>
     -->
    <!-- 
    <router-link to="/home/home"><button>去到Home</button></router-link>
    <router-link to="/about/about"><button>去到About</button></router-link>
     -->
    <button>去到home</button>
    <button>去到about</button>
    <router-view />
  </div>
</template>

<script>
export default {
  mounted(){
    // vue2调用push方法，应该传入成功和失败的回调函数
    // setTimeout(()=>{this.$router.push('/home/home',()=>{console.log('跳转成功');},(err)=>{console.log(err);})},2000)
  }
};
</script>

在main.js中，写

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,   /* 需要将router挂载到vue实例身上 */
  render: h => h(App)
}).$mount('#app')

 在views文件夹的AboutView.vue文件，其中写

<template>
  <div>
    <!-- <h1>This is an {{$route.query.key}} page</h1> -->
    <h1>This is an {{$route.params.key}} page</h1>
  </div>
</template>

<script>
  export default {
  }
</script>

在views文件夹的NotFound.vue文件，其中写

<template>
    <div>
        404 NotFound
    </div>
</template>

<script>
    export default {
        
    }
</script>

在router文件夹的index.js文件，其中写

import Vue from 'vue'
import VueRouter from 'vue-router'
import AboutView from '../views/AboutView.vue'
import NotFound from '../views/NotFound.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home/:key',
    name: 'home',
    component:  AboutView
  },
  {
    path: '/about/:key',
    name: 'about',
    component: AboutView
  },
  {
    path:'*',
    component:NotFound
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes   /* routes:routes */
})

export default router

PS：1.vue create vue-router-vue2（使用vue-router的3版本）；2.views文件夹管理路由组件，components文件夹管理普通组件