vue2.0路由怎么配置

这篇文章主要介绍了vue2.0路由怎么配置，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

项目基本手脚架搭建完毕后，建一个router文件夹，里面配置一个index.js文件。

文件内容：

npm install vue-router vue-resource --save-dev（安装 vue 路由模块vue-router和网络请求模块vue-resource）

import Vue from 'vue'  import Router from 'vue-router' （----引入路由---注释说明）  import About from '@/components/about'（--这些需要引入的是components文件夹下面创建的一些模板---相对路径----about代表about.vue模块）  import Home from '@/components/home'  import Brand from '@/components/brand'  import Company from '@/components/company'  import Connect from '@/components/connect'  import Main from '@/components/main'  import Join from '@/components/join'  import News from '@/components/news'  import Products from '@/components/products'  import son1 from '@/components/son1'  import son2 from '@/components/son2'  import list from '@/components/list'  import newList from '@/components/newList'  import culture from '@/components/culture'  import certification from '@/components/certification'  import zhuanjia from '@/components/zhuanjia'  Vue.use(Router) （--使用---）    export default new Router({   routes: [    {     path: '/main',     name: 'main',     component: Main    },--------------------------------    { path: '/',           这里是路由重定向，比如页面加载时候进入首页     redirect: '/main'          （比如给路由一个选中后的样式为红色 那么这里就能用到了---.router-link-active{样式}）    },---------------------------------    {---------------------这里是配置子路由     path: '/brand',     name: 'brand',     component: Brand,     children: [      {       path: '/',       name: 'newList',       component: newList      },      {       path: '/brand/culture',       name: 'culture',       component: culture      },      {       path: '/brand/certification',       name: 'certification',       component: certification      },      {       path: '/brand/zhuanjia',       name: 'zhuanjia',       component: zhuanjia      }     ]    },    {     path: '/about',     name: 'about',     component: About    },    {     path: '/company',     name: 'company',     component: Company    },    {     path: '/connect',     name: 'connect',     component: Connect    },    {     path: '/home',     name: 'home',     component: Home    },    {     path: '/join',     name: 'join',     component: Join,     children: [      {       path: '/',       name: 'son1',       component: son1      },      {       path: '/join/son2',       name: 'son2',       component: son2      }     ]    },    {     path: '/list',     name: 'list',     component: list    },    {     path: '/news',     name: 'news',     component: News    },    {     path: '/products',     name: 'products',     component: Products    }   ]  })

接下来就是在每一个模块文件中加入这样的一句话暴露出去：

<script>  export default {   name: 'about' ---自定义模块名字  }  </script>

在app中我们可以这样写：

 <template>   <div id="app1" class="pagebox">      <div ></div>      <ul class="index-tap">        <li><router-link to="/main">首页<p></p></router-link></li>        <li><router-link to="/about">关于我们<p></p></router-link></li>        <li><router-link to="/products">产品专区<p></p></router-link></li>        <li><router-link to="/news">新闻资讯<p></p></router-link></li>      </ul>      <ul class="index-tap">        <li><router-link to="/company">企业风采<p></p></router-link></li>        <li><router-link to="/join">招商加盟<p></p></router-link></li>        <li><router-link to="/connect">联系我们<p></p></router-link></li>        <li><router-link to="/brand">品牌介绍<p></p></router-link></li>      </ul>      <div ></div>      <router-view transition transition-mode="out-in"></router-view>      <div ></div>      <ul class="index-footer clearx">        <li v-on:click="showph = !showph">电话</li>        <li v-on:click="showmap = !showmap">地图</li>        <li v-on:click="showd = !showd">分享</li>        <!-- JiaThis Button BEGIN -->        <transition name="slide-fade">        <div class="jiathis_style_32x32 share" v-show="showd">          <a class="jiathis_button_qzone"></a>          <a class="jiathis_button_tsina"></a>          <a class="jiathis_button_tqq"></a>          <a class="jiathis_button_weixin"></a>          <a class="jiathis_button_renren"></a>        </div>        </transition>        <!-- JiaThis Button END -->        <transition name="slide-fade">        <div class="share sharephone" v-show="showph">          18305452462        </div>        </transition>        <transition name="slide-fade">        <div class="share showmap" v-show="showmap">          <ditu></ditu>---------------------------------自定义模板        </div>        </transition>      </ul>      <div class="fuceng" v-if="showmap"></div>   </div>  </template>    <script>  import ditu from '@/components/home'  export default {   name: 'app',   data () {    return {     search: '',     showd: false,     showph: false,     showmap: false    }   },   mounted () {    this.init()   },   methods: {    Search () {     if (this.search !== '') {      this.$router.push({       path: '/list',       query: {        serInfo: this.search       }      })     } else {      alert('请输入搜索内容')     }    },    init: function () {     let url = 'http://v3.jiathis.com/code/jia.js'     let script = document.createElement('script')     script.setAttribute('src', url)     document.getElementsByTagName('head')[0].appendChild(script)    }   },   components: {    ditu   }  }  </script>

感谢你能够认真阅读完这篇文章，希望小编分享的“vue2.0路由怎么配置”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!