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>