vue.js中Vue-router2.0基础的示例分析
这篇文章主要介绍vue.js中Vue-router 2.0基础的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联公司专注于企业成都全网营销推广、网站重做改版、回民网站定制设计、自适应品牌网站建设、成都h5网站建设、电子商务商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为回民等各大城市提供网站开发制作服务。
一、基础用法：
Hello App!
Go to Foo
Go to Bar
this is foo!
this is bar!
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template:'#foo' };
const Bar = { template:'#bar' };
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
];
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({ routes:routes });
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({ router:router }).$mount('#app');二、动态路由匹配：
Hello App!
Go to Foo
Go to Bar
User:{{ $route.params.id }},Post:{{$route.params.post_id}}
// 1. 定义组件。
const User = {
template:'#user',
watch:{
'$route'(to,from){
console.log('从'+from.params.id+'到'+to.params.id);
}
}
};
// 2. 创建路由实例 (可设置多段路径参数)
const router = new VueRouter({
routes:[
{ path:'/user/:id/post/:post_id',component:User }
]
});
//3. 创建和挂载根实例
const app = new Vue({ router:router }).$mount('#app');三、嵌套路由：
Hello App!
Go to Foo
Go to profile
Go to posts
