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

vue1.0

html部分————         <a v-link="{path:'/home'}">主页<a/>  跳转链接

                                    <router-view></router-view>     显示内容

js部分 ————

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

2. Home News组件都准备

var Home=Vue.extend({

template:"<h5>我是主页</h5>"
});

var News=Vue.extend({

template:"<h5>我是新闻</h5>"

})

//3. 准备路由

var router=new VueRouter();

//4. 关联

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

//5. 启动路由

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

vue2.0路由

html部分

<router-link to="/home">主页</router-link>   跳转链接

<router-view></router-view>      显示内容

Js部分

1.组件

var  Home = {template:"<h3>主页</h3>"};

var News = {template:"<h3>新闻</h3>"};

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

})