Vue2.0中的路由配置

Vue2.0较Vue1.0，路由有了较大改变。看一下Vue2.0中的路由如何配置：

步骤一：

在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件

默认设置如下：

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

template: '<App/>',

components: { App }

})

如果你有其他需要的css、js文件可以在这里用require和import来添加，建议require使路径用绝对路径，import使用相对路径。

自定义设置：

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

import App from './App'

import router from './router' //这里引入的是router目录，会默认识别里面的index.js文件（不能是其他名字）

import VueResource from 'vue-resource'      //引入vue-resource网络请求模块

Vue.use(VueResource)      //使用vue-resource网络请求模块

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */

//实例化vue对象配置选项路由及渲染App组件

new Vue({

el: '#app',  //这里绑定的是index.html中的id为app的div元素

router,

render: h => h(App)

//这里的render: h => h(App)是es6的写法

//转换过来就是：  暂且可理解为是渲染App组件

//  render:(function(h){

//    return h(App);

//  });

});

步骤二：App.vue文件是我们的组件入口，写入组件

 

 

1.使用 router-link 组件来导航；

2.通过传入‘to’ 属性指定链接(与router/index.js的path属性相一致)；

3. router-link 默认会被渲染成一个 <a>标签；

4.路由匹配到的组件将渲染在 router-view 中。

步骤三：在router/index.js文件中创建路由并配置路由映射 ，并通过export输出router到main.js文件中

 

 

1.mode设置为history表示利用了history.pushState API来完成URL跳转而无须重新加载页面。

扯远一点，mode有三种模式如下：

I) hash模式:使用URL hash值来作为路由。支持所有浏览器。

II) history模式：依赖HTML5 History API和服务器配置。查看HTML5 History模式。

III) abstract模式:支持所有JavaScript运行环境，如Node.js服务器端。如果发现没有浏览器的API，路由会自动强制进入这个模式。

2.scrollBehavior 设置了滚动条起始位置。

3.linkActiveClass 设置当前选中项的样式类名

4.最重要的是routes(注意：不是routers，没有r)

(1) path 就是 router-link to后面跟的链接，注意保持一致；

(2) component 对应的组件，常见有两种写法：第一种如上图。第二种如下：

 

(3) redirect是指重定向，将根路径重定向到指定路径。

步骤四：完成相应组件即可，如下图：