vue-router 路由配置

前提：

项目由 vue-cli 脚手架创建。

首先，先下载 vue-router   

npm install vue-router

安装完成后，运行项目

npm run dev

打开 main.js ， 引入并使用 vue-router

import VueRouter from "vue-router"
Vue.use(VueRouter)

引入创建好的组件

import Home from "./components/Home.vue"
import News from "./components/News.vue"

配置路由： （{path: '*', redirect: '/home'}  // 此项表示，默认加载）

const routes = [
  {path: '/home', component: Home},
  {path: '/news', component: News},
  {path: '*', redirect: '/home'}   /*默认跳转路由*/
]

实例化 VueRouter

const router = new VueRouter({
  　　routes     // routes : routes 的简写方式
})

Vue实例中挂载路由：

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

此时，路由就已经配置好了，接下来，我们需要在 App.vue 中 引入

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->

<router-view></router-view>

现在，我们就可以看到 Home 组件内容了，

扫描二维码关注公众号，回复： 2085711 查看本文章

再引入， router-link 设置路由导航，to 属性 指定链接

  <router-link to="home">主页</router-link>
  <router-link to="news">新闻页</router-link>

此时，一个简单的路由就搭建好了