vue-router 路由嵌套显示不出来_Vue Router 基础（一）

最新推荐文章于 2024-07-09 18:57:07 发布

weixin_39634876

最新推荐文章于 2024-07-09 18:57:07 发布

阅读量1.2k

点赞数

文章标签： vue-router 路由嵌套显示不出来

Vue Router？

Vue Router是Vue.js的官方路由管理器，可以控制Vue单页应用的路由。

如何快速上手？

vue-cli脚手架自带Vue-Router依赖

新版的vue-cli脚手架中，默认default模式没有router依赖，请选择 Manually select features后添加 Router依赖后，选择 History模式。

vue-cli官网

在HTML进行路由设置

<el-dropdown-menu slot="dropdown">

    <router-link to="/profile/index">

    <el-dropdown-item>新建分类</el-dropdown-item>

    </router-link>

</el-dropdown-menu>

我们可以利用<router-link to="path">标签来控制单页应用的跳转路径

使用单文件组件内进行路由设置

<el-dropdown-menu slot="dropdown">

    <el-menu-item @click="onCreate">新建分类</el-menu-item>

</el-dropdown-menu>

export default {

  methods: {

    onCreate() {

      this.$router.push({

        path: '/categories/create'

      })

    }

  }

}

我可以使用this.$router方法进行操作路由

执行了push或跳转操作还远远不够，我们还在router.js上进行路由（目录）添加你需要对应标准的地址以及地址包含component组件，不然编译器不知道你要跳转的实质内容是什么~

router.js配置

// 按需加载你需要的依赖

import Vue from 'vue'

import Router from 'vue-router'

import Main from './views/main.vue'

import CategoryEdit from './components/categoryEdit.vue'

Vue.use(Router)

export default new Router({

  mode: 'history',   // history模式

  base: process.env.BASE_URL, // 环境内部基础地址

  routes: [

    {

      path: '/', // 当地址在根目录的时候，跳转到Main的组件，这就是首页

      name: 'main',

      component: Main,

      children: [

        {

          path: '/categories/create',// 它是Main的子路由，默认在首页 调用CategoryEdit组件

          name: 'categoryCreate',

          component: CategoryEdit

        },

        {

          path: '/categories/create', // 它是Main的子路由， 当地址转到/categories/create上，则调用CategoryEdit组件

          name: 'categoryCreate',

          component: CategoryEdit

        }

      ]

    }

  ]

})

嵌套路由

刚刚在上面我们提高了「子路由」，然后我们开始了解下嵌套路由

/user/foo/profile                     /user/foo/posts

+------------------+                  +-----------------+

| User             |                  | User            |

| +--------------+ |                  | +-------------+ |

| | Profile      | |  +------------>  | | Posts       | |

| |              | |                  | |             | |

| +--------------+ |                  | +-------------+ |

+------------------+                  +-----------------+

这是官网的栗子，我们看来下更直观。

我们要做的是改变这个网页的子路由内容组件人，让我们看下代码吧~

<el-container style="height: 500px; border: 1px solid #eee">

    <el-aside width="200px"

              style="background-color: rgb(238, 241, 246)">

      <el-menu router

               :default-openeds="['1', '3']">

        <el-submenu index="1">

          <template slot="title">分类</template>

          <el-menu-item-group>

            <el-menu-item @click="onCreate">新建分类</el-menu-item>

            <el-menu-item>分类列表</el-menu-item>

          </el-menu-item-group>

        </el-submenu>

      </el-menu>

    </el-aside>

    <el-container>

      <el-header style="text-align: right; font-size: 12px">

      </el-header>

      <el-main>

        <!--这里是我们需要的子路由标签-->

        <router-view>

        </router-view>

      </el-main>

    </el-container>

</el-container>

export default {

  methods: {

    onCreate() {

      this.$router.push({

        path: '/categories/create'

      })

    }

  }

}

当我们在进行执行 $this.router.push 或者 <router-link> 跳转的时候，

我们可以看到，push的路径是「/categories/create」，回到router.js代码上,我们可以看到，/categories/create是在/根目录下的children里面，这就说明它是根目录的子路由，子路由在子路由标签<router-view>上进行渲染。

我们还可以利用`<router-view>`的name属性进行跳转制定的子路由容器

如图上，父容器HTML中有3个route视图：

header
side
content

我们需要这三个都是动态的，都是需要根据需求加载不同的内容。

<router-view class="view one"></router-view>

<router-view class="view two" name="a"></router-view>

<router-view class="view three" name="b"></router-view>

那么这个时候，我们需要在router.js中，加载配置三个组件

components为复数。

import Header from './components/header.vue'

import Side from './components/side.vue'

import Content from './components/content.vue'

import CategoryEdit from './components/categoryEdit.vue'

import CategoryList from './components/categoryList.vue'

 routes: [

    {

      path: '/',

      name: 'main',

      components: {

        efault: Header,

        a: Side,

        b: Content

      },

      children: [

        {

          path: '/categories/create/:userid',

          name: 'categoryCreate',

          component: CategoryEdit

        },

        {

          path: '/',

          name: 'categoryList',

          component: CategoryList

        }

      ]

    }

  ]

动态路由分配（如何给函数添加参数以及如何保证跳转的唯一性）

在绝大分部情况下，我们需要利用同一个组件加载不同的数据内容（比如详情、用户表信息等等），那我们怎么保证跳转的唯一性呢?

这时候，我们需要利用路由命名方法

1.router.js 配置对应路径以及名字

export default new Router({

  mode: 'history',

  base: process.env.BASE_URL,

  routes: [

    {

      path: '/',

      name: 'main',

      component: Main,

      children: [

        {

          path: '/categories/create/:userid', // 这是userid就是参数名

          name: 'categoryCreate',

          component: CategoryEdit

        },

        {

          path: '/',

          name: 'categoryList',

          component: CategoryList

        }

      ]

    }

  ]

})

2.路由容器，执行跳转操作

onCreate() {

      this.$router.push({

        name: 'categoryCreate',

        params: { userid: 123 }

      })

    }

3.点击跳转，则地址变成

http://localhost:8080/categories/create/123

4.在子路由容器中获取到参数名字和内容

mounted() {

    // 注意是this.$route，是路由对象

    console.log('你获取的参数是：' + this.$route.params); 

},

打印出来的数据

{

   userid: "123"

}

关于命名路由，还有其他的写法

// HTML上

<router-link :to="{ name: 'categoryCreate', params: { userId: 123 }}">User</router-link>

// .vue组件的其他写法

const userId = '123'

router.push({ name: 'user', params: { userId }}) // -> /user/123

router.push({ path: `/user/${userId}` }) // -> /user/123

// 这里的 params 不生效，必须使用上面的写法

router.push({ path: '/user', params: { userId }}) // -> /user

GET请求-路由组件传参数

这个和一般的url上拼接参数，获取一样，只不过router提供一个设置和获取方法。

http://localhost:8080/categories/create/123?dataval=admin

传递参数

this.$router.push({

        name: 'categoryCreate?ad=11',

        params: { 

          userid: 123 

        },

        query: {

          dataval: 'admin'

        }

      })

不需要在 router.js中进行配置

获取参数

let val = this.$route.query.dataval; // admin

其他的写法

<!-- 带查询参数，下面的结果为 /register?plan=private -->

<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

<!--拼到path中-->

this.$router.push({path: `/categories/create/${userid}?admin=tre`});