vue-router的基本使用和配置

1.在main.js文件中引入相關模塊以及組件及實例化vue對象配置選項路由及渲染App組件 默認設置如下：

import Vue from 'vue'
import App from './App'
import router from './router/index.js'  // 引入路由
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // 在vue中使用router
  components: { App },
  template: '<app/>'
})

 

2.自定義配置路由路徑，在src 下 router/index.js 文件中配置路由路徑

import Vue from 'vue'
import Router from 'vue-router'  // 引入vue-router

// 引入要跳轉的vue組件
import Manage from '@/page/admin/Manage'
import userList from '@/page/admin/userList'
import addUser from '@/page/admin/addUser'
import shopList from '@/page/admin/shopList'
import addShop from '@/page/admin/addShop'

Vue.use(Router)  // 在vue中注入Router
 // 配置路由路徑
const routes =[
  {
          path: '/',
          name: 'Login',
          component: Login  // 需要跳轉的組件
        },
        {
          path: '/Manage',
          name: 'Manage',
          component: Manage,
          children: [{
            path: '/userList',
            component: userList,
            meta: ['數據管理', '用戶列表']
          },
          {
            path: '/shopList',
            component: shopList,
            meta: ['數據管理', '商品列表']
          },
          {
            path: '/addUser',
            component: addUser,
            meta: ['添加數據', '添加用戶']
          },
          {
            path: '/addShop',
            component: addShop,
            meta: ['添加數據', '添加商品']
          }
        ]
        },
    
        {
          path: '/home',
          name: 'Home',
          component: Home
        },
        {
          path: '/helloworld',
          name: 'Home',
          component: HelloWorld
        }
]
// 將路徑注入到Router中
var router=new Router({
  'mode': 'history',
  routes
})
// 導出路由
export default router;

 

3.在頁面中使用路由

在vue-router中, 我們也可以看到它定義了兩個標簽<router-link> 和<router-view>。<router-link> 就是定義根據某個路徑跳到某個組件的標簽，<router-view> 就是點擊后，組件顯示內容的標簽。所以 <router-link> 還有一個非常重要的屬性 to， 它定義點擊之后，要到哪個路徑下 ， 如：<router-link  to="/home">Home</router-link>。