在使用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的基本配置就结束了!