每天一点点之vue框架开发 - 使用vue-router路由

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中引入组件

import Home from './components/home/Home'

import Footer from "./components/footer/Footer";

在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的路由就基本可以使用啦

巴特西