甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

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结构如下图：

vue-router中怎么使用嵌套路由

登录和注册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
    

     
  
               
      

首页

       登录       注册                   
          
新闻
          
登录界面
          
注册界面
          // 1. 定义（路由）组件。     const Home = { template: '#home' };     const News = { template: '#news' };     const Login = { template: '#login' };     const Reg = { template: '#reg' };     // 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}     ]     // 3. 创建 router 实例，然后传 `routes` 配置     const router = new VueRouter({       routes // （缩写）相当于 routes: routes     })     // 4. 创建和挂载根实例。     // 记得要通过 router 配置参数注入路由，     // 从而让整个应用都有路由功能     const app = new Vue({      router     }).$mount('#box')     // 现在，应用已经启动了！   

vue-router中怎么使用嵌套路由

以上就是“vue-router中怎么使用嵌套路由”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。


文章名称：vue-router中怎么使用嵌套路由
转载注明：http://chengdu.cdxwcx.cn/article/gepcpi.html

其他资讯