如何把组件渲染到页面上

红太狼 2022-05-09 05:40 251阅读 0赞

首先编好组件

GoodsList.vue

,然后在ruoter/index.js里引入

import GoodsList from './../views/GoodsList'以及在routes里声明这个组件

export default new Router({
      routes: [
        {
          path: '/',
          name: 'GoodsList',
          component: GoodsList
        }
      ]
    })

动态路由匹配

![70][]

动态的加载路由,像商品详情页面,页面元素都一样,只是根据不同的id渲染不同的内容.这就需要动态加载路由

在路由页面动态加载商品id

export default new Router({
      routes: [
        {
          path: '/goods:goodsId',
          name: 'GoodsList',
          component: GoodsList
        }
      ]
    })

然后把商标列表页的id动态渲染

<span>{
      {$route.params.goodsId}}</span>

如果传递2个参数:

path: '/goods/:goodsId/user/:name',

<span>{
      {$route.params.name}}</span>

history.pushState\["desc","test","/admin"\]参数的含义页面的描述,页面的标题,页面的地址

嵌套路由

就是在一个页面里点击一个链接跳转到另一个页面.

首先编好子页面,在index,js里引入,路由

import Image from '@/views/Image'
    import Title from '@/views/Title'

因为是子组件,所以要用children来定义路由:

routes: [
      {
        // path: '/goods/:goodsId/user/:name',
        path: '/goods',
        name: 'GoodsList',
        component: GoodsList,
        children:[
          {
            path:'image',
            name:'Image',
            component:Image,
          },{
            path:'title',
            name:'Title',
            component:Title,
          }
        ]

在主页面里,用router-link 来跳转页面,

并用div 包含router-view来加载子页面

<router-link to="/goods/title">显示图片标题</router-link>
     <router-link to="/goods/image">显示图片</router-link>
    <div>
       <router-view></router-view>
    </div>

/goods/title"这是绝地路径

[70]: /images/20220509/ce11d5e20d2f44f88a5515592c7728d6.png