vue router的使用

vue router的使用

一、安裝：npm install vue-router --save
二、新建router文件夾，創建index.js文件以下：

import Vue from 'vue'
import Router from 'vue-router'
//路由懶加載
const login = resolve => require(['../login.vue'], resolve);
const Apps = resolve => require(['../App.vue'], resolve);
const HelloWorld = resolve => require(['../components/HelloWorld'], resolve);
const second = resolve => require(['../components/second'], resolve);
const detail = resolve => require(['../components/detail'], resolve);

Vue.use(Router)

const routes = [
  {
    path: "/login",
    name: "login",
    component: login
  },
  {
    path: "/Apps",
    name: "Apps",
    component: Apps,
    children: [
      {
        path: "/HelloWorld",
        name: "HelloWorld",
        component: HelloWorld
      },
      {
        path: "/second",
        name: "second",
        component: second
      },
      {
        path: "/detail",
        name: "detail",
        component: detail
      }
    ]
  },
  {
    path: '/',
    redirect: '/login'
  }
]

var router = new Router({
  linkActiveClass:'list-active', //設置當前路由style
  routes
})
export default router;

三、在main.js中應用

import Vue from 'vue';
import router from './router';
var v = new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>',
  created: function () {

  }
})

四、在APP.vue中設置路由跳轉

<template>
  <div id="apps">
    <div class="leftNav">
      <router-link to="/HelloWorld">連接一</router-link>
      <router-link to="/second">連接二</router-link>
    </div>
    <div class="rightCon">
      <router-view/>
    </div>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld'
  import second from './components/second'

  export default {
    name: 'Apps',
    components: {
      HelloWorld,
      second
    },
    data () {
      return {

      }
    }
  }
</script>

五、js跳轉：this.$router.push({name: 'detail', query: {userInfo: thisName}})
六、vue-router默認是hash模式，切換成history模式

var router = new Router({
  mode: 'history',
  linkActiveClass:'list-active', //設置當前路由style
  routes
})

七、github：vue-router，歡迎star。