登录信息
// 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');四、编程式路由：
Hello App!
Go to Foo
User:{{ $route.params.id }}
注册
// 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' }});五、命名路由：
Named Routes
Current route name: {{ $route.name }}
This is Home
This is Foo
This is Bar {{ $route.params.id }}
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');六、命名视图：
Go to Foo
This is Foo
This is Bar {{ $route.params.id }}
This is baz
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');以上是“vue.js中Vue-router 2.0基础的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前名称：vue.js中Vue-router2.0基础的示例分析-创新互联
标题URL：http://bjjierui.cn/article/egojc.html
