vue路由配置 vue路由跳转

vue路由搭建

1，在views里面增加页面1.vue,2.vue,3.vue等,可以在页面写上相应的标识，方便测试。
2，在router分别增加1,2,3三个子文件，并分别添加index.js.在js里面配置好路由。
export default { path : '/cinema', component : () => import('@/views/Cinema') }
这里斜杠后面为网页中跳转的路径，@表示src,import后面为文件所在的具体路径，也就是你的页面。
3，在router的index.js中引入三个路由，并配置到routers中。

import movieRouter from './movie'
import cinemaRouter from './cinema'
import mineRouter from './mine 


 routes: [
       movieRouter,
       cinemaRouter,
       mineRouter
     ]

4，配置好路由之后，接下来就是路由跳转（点击底部tabbar时切换页面）
a.首先已经写好了静态页面，由于vue项目的首尾样式经常用的到，所以我们将头尾的样式存在public>css>common.css中。
b.接着我们将头部尾部插入到项目页面中（views的子页面），具体代码如下：

<template>
  <div id="main">
    <Header />
    <Tabbar />
  </div>
</template>

import Header from '@/components/Header';
import Tabbar from '@/components/Tabbar';

components: {
    Header,
    Tabbar
  }

c.将footer中的li换为vue的router-link标签，并将其tag设置为li,具体代码如下：

<footer id="footer">
   <ul>
     <router-link tag="li" to="/movie">
       <i class="iconfont icon-dianying"></i>
       <p>电影</p>
     </router-link>
     <router-link tag="li" to="/cinema">
       <i class="iconfont icon-yingyuan"></i>
       <p>影院</p>
     </router-link>
     <router-link tag="li" to="/mine">
       <i class="iconfont icon-wode"></i>
       <p>我的</p>
     </router-link>
   </ul>
 </footer>

这里的to表示跳转到的页面。具体可参考vue的router-link标签

ok,这里的路由配置完成，并可以进行跳转。你可以丰富你的页面，跳转时改变按钮的颜色和头部的文字等等，学海无涯，下次再见。