Vue Vue-route （4）

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route 编程式导航和几种路由

 

目录

编程式导航 

详情组件

创建组件

设置路由

电影列表

传参

另一种方式

动态路由

命名路由

别名

总结

---

编程式导航 

点击电影列表 跳转电影详情

详情组件

创建组件

在views中创建DetailView.vue组件页面。

示例如下：

设置路由

在router/index.js中引入详情页面并设置详情路由。

示例如下：

import Detail from '@/views/DetailView'

Vue.use(VueRouter) // 注册路由插件

// 配置表
const routes = [
  {
    path: '/films',
    name: 'films',
    component: Films,
    children: [
      {
        path: '/films/nowplaying',
        component: NowPlaying
      },
      {
        path: '/films/comingsoon',
        component: ComingSoon
      },
      {
        path: '/films',
        redirect: '/films/nowplaying'
      }
    ]
  },
  {
    path: '/detail',
    name: 'detail',
    component: Detail
  },

 

电影列表

在films/NowPlaying.vue页面渲染电影列表。

示例如下：

<template>
    <div>
        nowplaying
        <ul>
            <li v-for="data in datalist" :key="data">
                <router-link to="/detail">{{data}}</router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  data () {
    return {
      datalist: ['春眠不觉晓', '处处闻啼鸟', '夜来风雨声', '花落知多少']
    }
  }
}
</script>

传参

设置跳转，使用编程式导航。

示例如下：

<template>
    <div>
        nowplaying
        <ul>
            <!-- <li v-for="data in datalist" :key="data">
                <router-link to="/detail">{{data}}</router-link>
            </li> -->
            <li v-for="data in datalist" :key="data" @click="handleChangePage()">
                {{data}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  data () {
    return {
      datalist: ['春眠不觉晓', '处处闻啼鸟', '夜来风雨声', '花落知多少']
    }
  },
  methods: {
    handleChangePage () {
      // 编程式导航
      location.href = '#/detail'
    }
  }
}
</script>

另一种方式

另一种方式实现跳转。示例如下：

methods: {
    handleChangePage () {
      // 编程式导航
      // location.href = '#/detail'

      this.$router.push('/detail')
    }
  }

 

动态路由

列表项有很多，但详情只有一个，需要根据选择id，渲染相应详情。

所以需要传递相应id，故在连接中增加id参数。

示例如下：

<template>
    <div>
        nowplaying
        <ul>
            <!-- <li v-for="data in datalist" :key="data">
                <router-link to="/detail">{{data}}</router-link>
            </li> -->
            <li v-for="data in datalist" :key="data" @click="handleChangePage(data)">
                {{data}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  data () {
    return {
      datalist: ['春眠不觉晓', '处处闻啼鸟', '夜来风雨声', '花落知多少']
    }
  },
  methods: {
    handleChangePage (id) {
      // 编程式导航
      // location.href = '#/detail'

      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>

 

动态路由配置

在router/index.js中修改原有的详情路由。

示例如下：

{
    path: '/detail/:myid', // 动态路由
    name: 'detail',
    component: Detail
  }

接收参数

在详情组件内获取参数。

通过生命周期中的created函数在组件创建时获取参数。

示例如下：

控制台查看打印结果

 

修改获取参数

示例如下：

<script>

export default {
  created () {
    // 当前匹配的路由
    console.log('created', this.$route.params.myid)
    // axios 利用 id发请求到详情接口，获取详情数据，布局页面
  }
}
</script>

 

命名路由

对路由进行命名，就可以通过命名路由直接跳转。

{
    path: '/detail/:id', // 动态路由
    name: 'detail', // 命名路由
    component: Detail
  },

命名路由跳转

      // 1 通过路径跳转
      this.$router.push(`/detail/${id}`)

      // 2 通过命名路由跳转
      this.$router.push({
        name: 'detail',
        params: {
            id
        }
      })

别名

路由a别名是b，当用户访问b时，URL会保持为b，但是路由匹配则为a，

就像用户访问a一样。

路由配置，示例如下：

{
    path: '/cinemas',
    name: 'cinemas',
    alias: '/ci',
    component: Cinemas
  }

“别名”的功能让你可以自由地将UI结构映射到任意的URL，

而不是受限于配置的嵌套路由结构。

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue-route 编程式导航和几种路由