Vue-router的配置以及实战(易错点)
2017-01-04 19:21
573 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> </head> <body> <div id="box"> <ul> <li> <router-link to='/home'>主页</router-link> </li> <li> <router-link to='/news'>新闻</router-link> </li> </ul> <!--路由配置的组件将会渲染在这里--> <router-view></router-view> </div> <template id="home"> <h3>我是主页</h3> </template> <template id="news"> <h3>我是新闻</h3> </template> </body> <script> var Home = { template: '#home' }; var News = { template: '#news' }; //准备、定义路由 var routers = [ {path: '/home', component: Home}, {path: '/', component: Home}, {path: '/news', component: News} ]; //创建router实例 var router = new VueRouter({ routes: routers }); //创建和挂载根实例 var app = new Vue({ router: router }).$mount('#box'); </script> </html>
上面是一个实例,其中,我要特别指出的是(也是我自己遇到的坑),
vue-router2.x 版本相比之前的0.7.x版本,有很多破坏性改变,这导致很多跟着视频学习的人会遇到很多不知名的错误(敲脑袋:我明明跟视频里的代码一模一样啊,为什么错!)
咳咳,划重点了!!!
重大改变如下:
1、routes 选项取代了 router.map() 。此外,路由配置现在用数组而不是用对象哈希表来作为数据结构。这保证了一致的匹配次序(对象键值枚举的次序是依赖浏览器器的)。
例如上面代码中(vue-router2.x 版本):
//准备、定义路由 var routers = [ {path: '/home', component: Home}, {path: '/', component: Home}, {path: '/news', component: News} ];
原来0.7.x版本:
router.map({ 'home':{ component:Home }, 'news':{ component:News } });
2、router.redirect 已经被丢弃了!被丢弃了!被丢弃了!(重要的事情说三遍)!现在可以在 routes 中直接声明:
在代码
//准备、定义路由 var routers = [ {path: '/home', component: Home}, {path: '/', component: Home}, {path: '/news', component: News} ];
中 {path: ‘/’, component: Home},表示默认打开主页home!
再说一遍:
router.redirect({ '/':'/home' });
上面的写法丢弃了!
当然了,vue-router2.x 版本还有很多变化,具体可参考如下链接:
vue-router2.x 版本的重大变化
相关文章推荐
- Vue路由(vue-router)配置实战——动态路由,重定向,工程非根目录
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【四】——实现模型工厂,依赖注入以及格式配置
- Spring AMQP实例 以及Spring 配置文件动态注入属性使用实战
- vue,router-link传参以及参数的使用
- webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法
- Vue.js实战之利用vue-router实现跳转页面
- QX项目实战-2.模块分类以及配置读取
- vue2.0,vue-router配置
- vue2.0项目的环境配置以及有哪些的坑
- 【vue2.0实战分享】搭建vue运行环境以及项目目录
- 使用vue-router切换页面时,获取上一页url以及当前页面url
- vue(2.0)+vue-router(2.0)+vuex(2.0)实战
- vue-router和vue-cli以及组件之间的传值
- 【Spring实战】----Security4.1.3实现根据请求跳转不同登录页以及登录后根据权限跳转到不同页配置
- 【Spring实战】----Security4.1.3实现根据请求跳转不同登录页以及登录后根据权限跳转到不同页配置
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【四】——实现模型工厂,依赖注入以及格式配置
- vueJs+webpack单页面应用--vue-router配置
- Vue2.0 项目实战案例及Demo,基于vue2.0+vuex+vue-router+axios实现
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】
- vue-router使用history的配置问题