vue.js中Vue-router2.0基础的示例分析-创新互联
这篇文章主要介绍vue.js中Vue-router 2.0基础的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联公司联系热线：13518219792，为您提供成都网站建设网页设计及定制高端网站建设服务，
创新互联公司网页制作领域十多年，包括
成都办公窗帘等多个领域拥有多年的网站营销经验，选择
创新互联公司，为企业锦上添花。
一、基础用法：
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
