vue-router中如何使用嵌套路由

vue-router中如何使用嵌套路由，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联-专业网站定制、快速模板网站建设、高性价比肥乡网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式肥乡网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖肥乡地区。费用合理售后完善，10余年实体公司更值得信赖。

模板抽离

我们已经学习过了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.案例全部代码如下：

首页

登录注册

新闻

登录界面

注册界面

// 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://myzitong.com/article/jigjss.html

vue-router中如何使用嵌套路由

首页

首页

其他资讯