想必很多人和我一样在学习vue框架，下面附Vue-router2.0

1)基础用法：

[html] view plain copy

Hello App!

默认会被渲染成一个 “ 标签 –> Go to Foo Go to Bar

[javascript] view plain copy

// 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’);

2)动态路由匹配：

[html] view plain copy

Hello App!

Go to Foo Go to Bar

[javascript] view plain copy

// 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’);

3)嵌套路由：

[html] view plain copy

Hello App!

Go to Foo Go to profile Go to posts

[javascript] view plain copy

// 1. 定义组件。
const User = {
template:’#user’
};
const UserHome = {
template:’#userHome’
};
const UserProfile = {
template:’#userProfile’
};
const UserPosts = {
template:’#userPosts’
};
// 2. 创建路由实例
const router = new VueRouter({
routes:[
{ path:’/user/:id’, component:User,
children:[
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 中
{ path: ”, component: UserHome},
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 中
{ path:’profile’, component:UserProfile },
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
{ path: ‘posts’, component: UserPosts }
]
}
]
});
//3. 创建和挂载根实例
const app = new Vue({ router:router }).$mount(‘#app’);

4)编程式路由：

[html] view plain copy

Hello App!

Go to Foo

[javascript] view plain copy

// 1. 定义组件。
const User = {
template:’#user’
};
const Register = {
template:’#register’
};
// 2. 创建路由实例
const router = new VueRouter({
routes:[
{ path:’/user/:id’, component:User },
{ path:’/register’, component:Register }
]
});
//3. 创建和挂载根实例
const app = new Vue({ router:router }).$mount(‘#app’);

//4.router.push(location)
router.push({ path: ‘register’, query: { plan: ‘private’ }});

5)命名路由：
[html] view plain copy

Named Routes

Current route name: {{ $route.name }}

• home
• foo
• bar

[javascript] view plain copy

const Home = { template: ‘#home’ };
const Foo = { template: ‘#foo’ };
const Bar = { template: ‘#bar’ };

const router = new VueRouter({
routes: [
{ path: ‘/’, name: ‘home’, component: Home },
{ path: ‘/foo’, name: ‘foo’, component: Foo }, 蓝狮注册开户
{ path: ‘/bar/:id’, name: ‘bar’, component: Bar }
]
});

new Vue({ router:router }).$mount(‘#app’);

6)命名视图：

[html] view plain copy Go to Foo

[javascript] view plain copy

const Foo = { template: ‘#foo’ };
const Bar = { template: ‘#bar’ };
const Baz = { template: ‘#baz’ };

const router = new VueRouter({
routes: [
{
path: ‘/’,
components: {
default:Foo,
a:Bar,
b:Baz
}
}
]
});

new Vue({ router:router }).$mount(‘#app’);