vue中路由的簡單使用

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

router.js中配置路由規則，項目中所有的路由規則通常都統一配置到同一個文件中，習慣將這個文件命名爲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'
    },
  ]
})

main.js ,new Vue中掛載一下router屬性

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>

subProd1.vue組件

<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>

演示效果如下：