微客导航 » 文章资讯 » vue.js中Vue-router 2.0基础实践教程

vue.js中Vue-router 2.0基础实践教程

2024-02-24 05:33:03 233

前言

Vue.js的一大特色就是构建单页面应用十分方便，既然要方便构建单页面应用那么自然少不了路由，vue-router就是vue官方提供的一个路由框架。本文主要介绍了Vue-router2.0的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：

一、基础用法：


HelloApp!




GotoFoo
GotoBar

thisisfoo!

thisisbar!

//1.定义（路由）组件。
//可以从其他文件import进来
constFoo={template:'#foo'};
constBar={template:'#bar'};
//2.定义路由
//每个路由应该映射一个组件。其中"component"可以是
//通过Vue.extend()创建的组件构造器，
//或者，只是一个组件配置对象。
constroutes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
];
//3.创建router实例，然后传`routes`配置
//你还可以传别的配置参数,不过先这么简单着吧。
constrouter=newVueRouter({routes:routes});
//4.创建和挂载根实例。
//记得要通过router配置参数注入路由，
//从而让整个应用都有路由功能
constapp=newVue({router:router}).$mount('#app');

二、动态路由匹配：


HelloApp!

GotoFoo
GotoBar

User:{{$route.params.id}},Post:{{$route.params.post_id}}

//1.定义组件。
constUser={
template:'#user',
watch:{
'$route'(to,from){
console.log('从'+from.params.id+'到'+to.params.id);
}
}
};
//2.创建路由实例(可设置多段路径参数)
constrouter=newVueRouter({
routes:[
{path:'/user/:id/post/:post_id',component:User}
]
});
//3.创建和挂载根实例
constapp=newVue({router:router}).$mount('#app');

三、嵌套路由：


HelloApp!

GotoFoo
Gotoprofile
Gotoposts

User:{{$route.params.id}}

主页

概况

登录信息

//1.定义组件。
constUser={
template:'#user'
};
constUserHome={
template:'#userHome'
};
constUserProfile={
template:'#userProfile'
};
constUserPosts={
template:'#userPosts'
};
//2.创建路由实例
constrouter=newVueRouter({
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.创建和挂载根实例
constapp=newVue({router:router}).$mount('#app');

四、编程式路由：


HelloApp!

GotoFoo

User:{{$route.params.id}}

//1.定义组件。
constUser={
template:'#user'
};
constRegister={
template:'#register'
};
//2.创建路由实例
constrouter=newVueRouter({
routes:[
{path:'/user/:id',component:User},
{path:'/register',component:Register}
]
});
//3.创建和挂载根实例
constapp=newVue({router:router}).$mount('#app');

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

五、命名路由：


NamedRoutes
Currentroutename:{{$route.name}}

home
foo
bar

ThisisHome

ThisisFoo

ThisisBar{{$route.params.id}}

constHome={template:'#home'};
constFoo={template:'#foo'};
constBar={template:'#bar'};

constrouter=newVueRouter({
routes:[
{path:'/',name:'home',component:Home},
{path:'/foo',name:'foo',component:Foo},
{path:'/bar/:id',name:'bar',component:Bar}
]
});

newVue({router:router}).$mount('#app');

六、命名视图：


GotoFoo






ThisisFoo



ThisisBar{{$route.params.id}}



Thisisbaz

constFoo={template:'#foo'};
constBar={template:'#bar'};
constBaz={template:'#baz'};

constrouter=newVueRouter({
routes:[
{
path:'/',
components:{
default:Foo,
a:Bar,
b:Baz
}
}
]
});

newVue({router:router}).$mount('#app');

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

返回顶部
3162201930
czq8825@qq.com

vue.js中Vue-router 2.0基础实践教程

HelloApp!

HelloApp!

HelloApp!

User:{{$route.params.id}}

HelloApp!

User:{{$route.params.id}}

NamedRoutes

热门推荐

随机推荐