Vue學習之路（2）vue-router

vue-router 是vue很重要的組成部分。

1.一般用vue腳手架新建v項目時會選擇安裝vue-router，沒有的話 在項目 目錄下執行

    sudo cnpm install vue-router 安裝

2.在src目錄下有router文件夾 有index.js

  

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]

})

   當然，以後我們的路由不可能只有這一個，需要換種寫法，可以看一下下面的代碼與上面的區別。(主要用命名路由)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
// import Login from '@/components/Login'

Vue.use(Router);
//把路由分開，利於整理和一些循環 比如導航菜單...
export const helloRouter=[
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    },
    {
        path: '/test',
        name: 'Test',
        component: Test
    }
]
export const loginRouter={
    path: '/login',
    name: 'Login',
    component: () => import('@/components/Login')   //省去頂部引入文件
};
export const appRouter=[
    ...helloRouter,//擴展運算符（ spread ）是三個點（...）。它好比 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列
    loginRouter
]
export default new Router({
    routes: appRouter

})

3.<router-view /> 標籤  在app.vue  裏有<router-view /> 或者是<router-view></router-view>

   是讓 路由import的vue文件展示到當前位置。

4.動態路由

{path:'item/:id',name:'Item',component:()=>import('@/components/Item')}

獲取動態參數：

<h1>動態參數：{{ $route.params.id }}</h1>