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文件是我们的组件入口,写入组件
![](http://upload-images.jianshu.io/upload_images/5873060-91498e4edeb39984.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
1.使用 router-link 组件来导航;
2.通过传入‘to’ 属性指定链接(与router/index.js的path属性相一致);
3. router-link 默认会被渲染成一个 <a>标签;
4.路由匹配到的组件将渲染在 router-view 中。
步骤三:在router/index.js文件中创建路由并配置路由映射 ,并通过export输出router到main.js文件中
![](http://upload-images.jianshu.io/upload_images/5873060-287208d93000cfaf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
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 对应的组件,常见有两种写法:第一种如上图。第二种如下:
![](http://upload-images.jianshu.io/upload_images/5873060-1216a40ed8cf51fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
(3) redirect是指重定向,将根路径重定向到指定路径。
步骤四:完成相应组件即可,如下图:
![](http://upload-images.jianshu.io/upload_images/5873060-9cb7f458728ce50a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/5873060-37a556e036b9dbbe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/5873060-a5e8f355b8015ed6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)