VUE 路由router

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

首先要下载vue-router

# 在项目目录下
npm install vue-router

在webpack模式下,建议在src文件下的router(路由)中的index.js文件中导入vue-router,并且让Vue使用它.

可以直接在mian.js中导入,直接生成一个对象挂载到Vue对象中,不必再导入

import Vue from 'vue'
import Router from 'vue-router' 
# Router是为他起的名字,vue-router是第三方模块所以使用他的名字
import Vmain from '@/components/Vmain'
import Vmarked from '@/components/Vmarked'
# 导入组件,使路由对应组件
Vue.use(Router)

创建路由对象抛出

export default new Router({
  mode: 'history', // 解决#
  routes: [ //routes中就是一个个的对象,对象包括
    {
      path: '/', // 路径
      name: 'Vmain', //名字
      component: Vmain // 对应的组件
    },
     {
      path: '/marked',
      name: 'Vmarked',
      component: Vmarked
    }
  ]
}

在main.js中导入路由对象,将他挂载到Vue中

import Vue from 'vue'
import App from './App'
import router from './router' // 会直接去导入index

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // router:router 的缩写
  components: { App }, // 子组件
  template: '<App/>'
})

渲染路由

 <router-link :to="item.url">{{item.name}}</router-link>
# to属性就是渲染出来a标签的href,而这个a标签不会重新加载页面

路由组件的出口

<router-view></router-view>
# 会将路由对应的组件放在<router-view></router-view>中

子路由

在VueRouter对象中的routes属性的字典中添加children属性对应着列表,里面也是一个个的对象

let router = new VueRouter({
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'courses',
                    path: '/courses',
                    component: Courses,
                    children: [
                        {
                            path: 'lightcourses',
                            component: LightCourses
                        },
                        {
                            path: 'degreecourses',
                            component: DegreeCourses
                        },
                    ]
                },
            ]
        });

　　

　　

动态路由及参数