(六)最简单的vue教程,开发自己的电影网站:添加路由,增加详情页

avatar

上一节我们把列表弄出来了,但还要展示详情呀,这时候就要用到路由了,vue里也有路由,这一节就来说一下路由的用法

安装

yarn add vue-router

配置

找到 main.js 在里面加上下面配置

import VueRouter from 'vue-router'
import App from './App.vue'
import Detail from './components/Detail.vue'

// ... 省略的部分

Vue.use(VueRouter)
const routes = [{
  path: '/',
  component: App
}, {
  path: '/detail/:url',
  component: Detail
}]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这些都是固定写法,照着抄就行

路由定义有两种方式

  • 普通路由 / 这种就是普通路由,它能匹配到 http://localhost:8082/ 地址
  • 动态路由 /detail/:url 是动态路由,它能匹配到 http://localhost:8082/detail/11http://localhost:8082/detail/22 等地址

动态路由取值

既然是动态路由,那么后面 :url 肯定是动态的了,每次都不同的,取值很简单

this.$route.params.url

其它

你以为上面这些配置就够了?怎么可能,还少了一样重要的东西 <router-view></router-view> 这东西是个承载体,路由匹配到后加载的组件就是放在这货定义的地方

为此我把 App.vue 做了改动,将内容清掉,然后在 template 里加上 <router-view></router-view> 这货

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

然后再新建一个 Index.vue 用于首页展示的组件

Index.vue

<template>
  <div class="index">
    <TabBar/>
  </div>
</template>

<script>
import TabBar from "./TabBar";
export default {
  name: "index",
  components: {
    TabBar
  }
};
</script>

<style scoped>
</style>

然后将 main.js 里的配置稍微更改一下

import VueRouter from 'vue-router'
import App from './App.vue'
import Index from './components/Index.vue'
import Detail from './components/Detail.vue'

// ... 省略的部分

Vue.use(VueRouter)
const routes = [{
  path: '/',
  component: Index
}, {
  path: '/detail/:url',
  component: Detail
}]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

至此路由部分就加好了,对了还有一个点击列表进入详情的事件没说

点击事件

vue里事件都是以 @ 开头的,比如点击事件就是 @click,在vue里通过js跳转路由写法如下

this.$router.push('/detail/xxx');

这里给个例子,看下就明白怎么用了

Item.vue

<template>
<div>
  <div class="item" @click="toDetail(item.url)" v-for="item in list" v-bind:key="item.id">
    {{item.title}}
  </div>
</div>
</template>

<script>
export default {
  name: "item",
  data() {
    return {
      list: []
    };
  },
  mounted() {},
  methods: {
    loadData(list) {
      this.list = list;
    },
    toDetail(url) {
      this.$router.push("/detail/" + encodeURIComponent(url));
    }
  }
};
</script>

其它

如果想做的对用户更友好,还可以加上滚动到底自动加载更多,推荐一个库 vue-scroll-loadmore

还有页面的header部分,进入了详情页,一般都会点击页面上的返回按钮返回,这个可以在 header 组件里定义一个点击事件,然后通过 this.$router.go(-1) 返回到上一页

成品请看教程总结页

目前还没有回答,快来帮帮TA吧!
添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录