1.安装路由（安装过的跳过此步）

// 进入项目根目录
cd frontend
// 安装
npm install vue-router --save-dev

 

2.在入口文件main.js中引入

import VueRouter from 'vue-router'

 

3.在main.js中使用（全局）

Vue.use(VueRouter)

 

4.设置路由

在main.js中设置路由

const routes = [
  {path:'/',component:Home},
  {path:'/footer',component:Footer},
]

在Header.vue（组件)中设置跳转

<router-link to="/">home</router-link>
<router-link to="/footer">footer</router-link>

单击可以实现不刷新页面跳转

但是在实际开发中，经常会遇到一个问题，就是在浏览器地址栏中，用户会手动输入一些地址，可能出现输错，这个时候如果没有做路由错误处理，页面显示可能就会出问题，因此在实际开发中一定要记得配置路由

 

方法也简单，就是在main.js中添加一个路由

const routes = [
  {path:'*',redirect:'/'},
]

 

5.创建路由对象

const router = new VueRouter({
  routes,
  mode:'history'
})

 

6.在vue实例中引入路由对象

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

好啦，到这里vue的路由就基本可以使用啦

 

版权声明：本文为cap-rq原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/cap-rq/p/10100850.html