vue1.0和vue2.0的区别之路由
2017-06-06 15:41
267 查看
首先先说一下vue1.0在脚手架中如何声明和使用路由。首先先下载vue-router,在你的项目中用命令行中键入npm install vue-router@0.7.13,@后面的数字代表版本号。然后在你的项目中导入vue-router,导入完了之后用Vue.use()方法来使用路由,然后new一个路由对象,在map中配置路由,最后开启路由。下面用一个demo来详细的演示一下代码。这个demo是一个类似门户网站的导航栏,通过点击按钮来切换路由。
在App.vue中,有两个路由映射,这两个映射分别跳到Home.vue和News.vue中:
与之对应的Home.vue和News.vue
然后在main.js中配置路由
或者新建一个router.config.js文件,在该文件中这样配置路由:
然后在原来的main.js中这样调用:
最后运行。
在2.0中,路由的配置这有些不同,具体如下分析。首先下载一个路由,类似上面,只是不用加版本号,默认下载最新。类似的,首先App.vue中的v-link写法与上面不同。上面是在<a>标签中加入v-link这个属性,在2.0中则不需要<a>标签作为映射,直接通过<router-link to="路径">来作为映射,代码如下:
然后在main.js中配置路由的写法又是不同,首先在2.0中没有router.map这个写法,取而代之的是const routes=[json的东西];并且没有router.redirect这个写法,想要默认路由的话要在const routes中加入{path:'*',redirect:'/home'},还有一点就是,路由的开启也改了,变成这种写法:
最后给大家展示一下整个main.js代码:
总结一下vue1.0和2.0之间路由的区别。
首先布局发生变化,1.0中可以在<a>并且中加入v-link这个属性来声明一个路由的映射,但是在2.0中这个方法完全不行,取而代之的是<router-view to="路径"></router-view>
然后路由的写法也发生变化。1.0中在router.map()里面写一个json,json的内容是关于路由的规则,如'router.map(home':{component’:Home}),而在2.0中写法变成const routes=[],如const routes=[{path:'/home',component:Home}],routes写好之后还要放到VueRouter的实例中声明。
其次是默认路由的写法也发生变化,1.0中直接通过router.redirect({'/':'/home'}),而2.0中是在刚刚的const routes里面加入{path:'*',redirect:'/home'}。
还有一点就是路由的开启也是不同的,1.0中是router.start(App,'#app'),2.0中是声明一个Vue实例,在实例中开启,如下所示:
除此之外,路由的嵌套也是不同,1.0中的写法是这样的,通过subRoutes来声明一个子路由:
2.0的写法是这样的,在component后面加入children,children相当于上面的routes:
在App.vue中,有两个路由映射,这两个映射分别跳到Home.vue和News.vue中:
<template> <div id="app"> <h3>vue-loader+ vue-router</h3> <div> <a v-link="{path:'/home'}">主页</a> <a v-link="{path:'/news'}">新闻</a> </div> <router-view></router-view>//路由的视图 </div> </template> <script> </script> <style> body{ background: #ccc } .v-link-active{ font-size: 20px; color: #f60; } </style>
与之对应的Home.vue和News.vue
<template> <h3>我是主页</h3> </template>
<template> <h3>我是新闻</h3> </template>
然后在main.js中配置路由
import Vue from 'vue' import VueRouter from 'vue-router' //引入一个路由组件 import App from './App.vue' Vue.use(VueRouter); //使用被引用的路由 import Home from './components/Home.vue' //导入被映射的组件 import News from './components/News.vue' //导入被映射的组件 //配置路由,路由是常量,不能变更,所以用const const router=new VueRouter();
//声明一些路由的规则 router.map({ 'home':{ component:Home }, 'news':{ component:News } })
//默认打开的组件 router.redirect({ '/':'/home' }); router.start(App,'#app'); //打开路由
或者新建一个router.config.js文件,在该文件中这样配置路由:
//专门配置路由规则 //引入模块 import Home from './components/Home.vue' import News from './components/News.vue' export default{ '/home':{ component:Home }, '/news':{ component:News } }
然后在原来的main.js中这样调用:
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import routerConfig from './router.config.js' //导入router.config.js Vue.use(VueRouter); //配置路由 const router=new VueRouter(); router.map(routerConfig); //在这里导入配置文件 router.redirect({ '/':'/home' }); router.start(App,'#app');
最后运行。
在2.0中,路由的配置这有些不同,具体如下分析。首先下载一个路由,类似上面,只是不用加版本号,默认下载最新。类似的,首先App.vue中的v-link写法与上面不同。上面是在<a>标签中加入v-link这个属性,在2.0中则不需要<a>标签作为映射,直接通过<router-link to="路径">来作为映射,代码如下:
<template> <div id="app"> <h3>vue2.0+webpack</h3> <div> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> </div> <div> <router-view></router-view> </div> </div> </template>
然后在main.js中配置路由的写法又是不同,首先在2.0中没有router.map这个写法,取而代之的是const routes=[json的东西];并且没有router.redirect这个写法,想要默认路由的话要在const routes中加入{path:'*',redirect:'/home'},还有一点就是,路由的开启也改了,变成这种写法:
const app=new Vue({ el: '#app', router: router, render: h=>h(App) })
最后给大家展示一下整个main.js代码:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import News from './components/News.vue'
Vue.use(VueRouter);
Vue.config.debug=true;
const routes=[
{path: '/home', component: Home},
{path: '/news', component: News},
{path: '*', redirect: '/home'}
];
const router=new VueRouter({
routes
})
const app=new Vue({ el: '#app', router: router, render: h=>h(App) })
总结一下vue1.0和2.0之间路由的区别。
首先布局发生变化,1.0中可以在<a>并且中加入v-link这个属性来声明一个路由的映射,但是在2.0中这个方法完全不行,取而代之的是<router-view to="路径"></router-view>
然后路由的写法也发生变化。1.0中在router.map()里面写一个json,json的内容是关于路由的规则,如'router.map(home':{component’:Home}),而在2.0中写法变成const routes=[],如const routes=[{path:'/home',component:Home}],routes写好之后还要放到VueRouter的实例中声明。
其次是默认路由的写法也发生变化,1.0中直接通过router.redirect({'/':'/home'}),而2.0中是在刚刚的const routes里面加入{path:'*',redirect:'/home'}。
还有一点就是路由的开启也是不同的,1.0中是router.start(App,'#app'),2.0中是声明一个Vue实例,在实例中开启,如下所示:
const app=new Vue({ el: '#app', router: router, render: h=>h(App) })
除此之外,路由的嵌套也是不同,1.0中的写法是这样的,通过subRoutes来声明一个子路由:
'/home':{ component:Home, subRoutes:{ 'login':{ component:Login }, 'reg':{ component:Reg } } }
2.0的写法是这样的,在component后面加入children,children相当于上面的routes:
const routes=[ {path: '/home', component: Home}, { path: '/news', component: News, children: [ {path:'login', component: Login} ] }, {path: '*', redirect: '/home'} ];
相关文章推荐
- 个人总结:vue1.0与2.0中路由的区别
- vue-cli 路由 实现类似tab切换效果(vue 2.0)
- Vue 笔记三:Vue2.0与1.0的区别
- Vue.js 2.0 独立构建和运行时构建的区别
- 前端些事之vue1.0和vue2.0的区别
- Vue2.0的变化(2)———vue2.0动画的变化、vue-2.0路由的变化
- 列表渲染 Vue2.0与Vue1.0的区别
- vue2.0设置默认路由的代码,以及点击不同路由加上样式的api
- vue1.0与vue2.0区别之组件通信
- vue1.0与2.0区别之生命周期
- vue.js中的路由vue-router2.0使用
- vue2.0路由-适合刚接触新手简单理解
- Vue2.0的群组路由
- vue2.0与1.0的区别
- vue.2.0-路由
- Vue 2.0的路由
- vue2.0环境搭建(含router路由)
- vue-router2.0动态路由获取参数
- vue学习笔记之vue1.0和vue2.0的区别介绍
- Vue.js 2.0 独立构建和运行时构建的区别