每天一点点之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的路由就基本可以使用啦

每天一点点之vue框架开发 - vue-router路由进阶（路由别名、跳转、默认路由、二级路由、路由守卫）