vue-cli的路由配置之快速入门(vue-router)

在使用vue-cli进行前端项目开发的过程中，如果你需要要开发一个多页面应用，VueRouter便是一个必不可少的插件，下面来教大家如何快速上手VueRouter的路由配置

前提是你已经正确安装了vue-cli

第一步：打开vue-router官方网站的安装页：https://router.vuejs.org/zh/installation.html

第二步：选择合适的安装方法，我这里使用NPM安装：npm install vue-router

第三步：我们要制作一个这样的页面，点击顶部导航可以切换页面中部的内容

首先准备四个vue页面，目录结构如下：

然后在main.js中配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'//引入vue-router
import App from './App.vue'
import HelloWorld from './components/HelloWorld'//引入组件
import Home from './components/Home'//引入组件

Vue.config.productionTip = false
Vue.use(VueRouter)//使用vue-router

const  router =new VueRouter({//定义一个常量来配置路由
    routes:[
        {path:"/",component:Home},//配置路径与对应组件名
        {path:"/HelloWorld",component:HelloWorld},//配置路径与对应组件名
    ],
    mode:"history"//建议设置该属性，否则地址栏将出现“#”号，会影响后续编码
})
new Vue({
    router,//实例化路由
    render: h => h(App),
}).$mount('#app')

这里的path是指的浏览器地址栏的路径，即“/”为网站根目录，component为组件名，要想组件能在配置路由后正常使用，必须先在前面引入组件

然后在Home.vue和HelloWorld.vue中分别编写页面内容(以下内容的页面样式全部省略)：

Home.vue:

<div class="home">
        <h1>这里是首页</h1>
    </div>

HelloWorld.vue:

  <div class="hello">
    <pre>

    小巷
    又弯又长
    没有门
    没有窗
    我拿把旧钥匙
    敲着厚厚的墙

    </pre>

  </div>

然后编写顶部导航 NavModle.vue:

<div class="nav-bar">
        <ul>
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/HelloWorld">详情</router-link></li>
        </ul>
    </div>

注意这里不建议使用a便签 推荐使用router-link，因为后者不会导致页面刷新；而router-link中的to属性类似于a标签中的href

编写底部 FootModle.vue:

<div class="foot-bar">
        法法之轮战神
    </div>

 

最后在App.vue中引入组件：

  <div id="app">
    <nav-modle></nav-modle>
    <router-view></router-view>
    <foot-modle></foot-modle>
  </div>

注意这里的<router-view>标签里面的内容便是路由切换时呈现的内容

到这里VueRouter的基本配置就结束了！

附源码：https://github.com/liyuxing114/vue-router-demo