vue-router中怎么使用嵌套路由
今天小编给大家分享一下vue-router中怎么使用嵌套路由的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
成都网站设计、网站制作,成都做网站公司-成都创新互联公司已向上千家企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。
模板抽离
我们已经学习过了Vue模板的另外定义形式,使用。
首页新闻
然后js里定义路由组件的时候:
// 1. 定义(路由)组件。 const Home = { template: '#home' }; const News = { template: '#news' };
路由嵌套
实际应用界面,通常由多层嵌套的组件组合而成。
比如,我们 “首页”组件中,还嵌套着 “登录”和 “注册”组件,那么URL对应就是/home/login和/home/reg。
首页
登录 注册
这是访问/home后的模板,其中我们需要把/home/login和/home/reg渲染进来。
完成上面代码后,HTML结构如下图:
登录和注册2个组件
登录界面注册界面
//定义路由组件 const Login = { template: '#login' }; const Reg = { template: '#reg' };
3.定义路由
// 2. 定义路由 const routes = [ { path: '/', redirect: '/home' }, { path: '/home', component: Home, children:[ { path: '/home/login', component: Login}, { path: '/home/reg', component: Reg} ] }, { path: '/news', component: News} ]
注意我们在home路由配置了它的children。这就是嵌套路由。
4.案例全部代码如下:
home news 首页
登录 注册 新闻登录界面注册界面
以上就是“vue-router中怎么使用嵌套路由”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
当前名称:vue-router中怎么使用嵌套路由
网站路径:http://hbruida.cn/article/gepcpi.html