vue中路由的简单使用 (原创)

vue中路由(vue-router)的使用

router.js中配置路由规则，项目中所有的路由规则通常都统一配置到同一个文件中，习惯将这个文件命名为router.js，内容如下：

import Vue from 'vue'
import Router from 'vue-router'

import Home    from '../components/Home.vue';
import Product from '../components/Product.vue';
import Project from '../components/Project.vue';
import AboutUs from '../components/AboutUs.vue';
import subProd1 from '../components/subProd1.vue';
import subProd2 from '../components/subProd2.vue';


Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/Home',
      component:Home,
    },
    {
      path: '/Product',
      component:Product,
      children:[
        {
          path:'subProd1',
          component:subProd1
        },
        {
          path:'subProd2',  // 简化写法 相当于/menu1/subMenu2
          component:subProd2
        },

      ]
    },
    {
      path: '/Project',
      component:Project,
    },
    {
      path: '/AboutUs',
      component:AboutUs,
    },
    {
      path:'/',
      redirect:'/Home'
    },
  ]
})

import Vue from 'vue'
import App from './App'
import router from './router/router.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//注意这行代码很重要，挂载路由
  components: { App },
  template: '<App/>'
})

//...

})；

挂载路由对象。

App.vue  项目父(根)组件

<template>
  <div >
    <ul>
      <li>
        <router-link to="/home">首页</router-link>
      </li>
      <li>
        <router-link to="/product">核心产品</router-link>
      </li>
      <li>
        <router-link to="/project">项目案例</router-link>
      </li>
      <li>
        <router-link to="/aboutus">关于我们</router-link>
      </li>
    </ul>
    <div style="float: left;clear: both;margin-top: 10px">

      <router-view/>

    </div>

  </div>
</template>
<style scoped>
  ul li{
    list-style-type: none;
    font-size: 20px;
    float: left;
    margin-left: 20px;
  }

  a {
    text-decoration: none;
  }
  a:visited{
    color: #000000;
  }

</style>
<script>
  export default {
    name: 'App'
  }
</script>

Aboutus.vue 组件 ：

<template>
 <div>
  这是关于我们组件
 </div>
</template>

<script>
  export default {
    name: "AboutUs"
  }
</script>

<style scoped>
</style>

Home.vue组件：

<template>
  <div>
  这是首页组件

  </div>
</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style scoped>
</style>

Product.vue组件

<template>
<div>
  <p>产品信息</p>

 <ul>
   <li> <router-link to="/product/subprod1">子产品1</router-link></li>
   <li> <router-link to="/product/subprod2">子产品2</router-link></li>

 </ul>


  <div class="content">
    <router-view></router-view>

  </div>


</div>
</template>

<script>
  export default {
    name: "Product"
  }
</script>

<style scoped>
  .content{
    padding: 30px;
  }

</style>

Project.vue组件:

<template>
  <div>
    这是项目案例组件
  </div>
</template>

<script>
  export default {
    name: "Project"
  }
</script>

<style scoped>
</style>

<template>

<div>
  产品1详情
</div>

</template>
<style scoped>
</style>
<script>
  export default {
    name:'subProd1'
  }
</script>

subProd2.vue组件

<template>

<div>
  产品2详情
</div>

</template>
<style scoped>
</style>
<script>
  export default {
    name:'subProd2'
  }
</script>

最终演示效果如下：