vue路由配置

来源：互联网发布：远程火箭炮知乎编辑：程序博客网时间：2024/05/18 13:25

项目基本手脚架搭建完毕后，建一个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 style="clear:both;"></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 style="clear:both;"></div><router-view transition transition-mode="out-in"></router-view><div style="clear:both;"></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>

阅读全文

2 0