vue1.0与vue2.0路由的区别

个人总结——vue1.0与vue2.0路由的区别

vue1.0

html部分————         主页  跳转链接

                                         显示内容

---

js部分 ————

1.准备一个根组件var App=Vue.extend();//

2. Home News组件都准备

var Home=Vue.extend({

template:"

我是主页

"
});

var News=Vue.extend({

template:"

我是新闻

"

})

//3. 准备路由

var router=new VueRouter();

//4. 关联

router.map({ 'home':{ component:Home }, 'news':{ component:News } });

//5. 启动路由

router.start(App,'#box');

vue2.0路由

html部分

主页   跳转链接

      显示内容

Js部分

1.组件

var  Home = {template:"

主页

"};

var News = {template:"

新闻

"};

2.配置路由

const routes = [

{path:"/home",component:Home}; //配置路由指向

{path:"/news",component:News}; //配置路由指向

{path:"*",redirect:"/home"};   //重定向

]

3.生成路由实例

const router = new VueRouter({

    routes

})

4.最后挂到vue模块语句上

new Vue({

    el:"#app",

    router

})