vue开发饿了吗外卖app②——安装和使用vue-router

最新推荐文章于 2024-07-23 17:06:34 发布

原创最新推荐文章于 2024-07-23 17:06:34 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

Vue开发饿了吗外卖app实战专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Vue项目中配置和使用vue-router实现页面导航。通过在main.js中引入VueRouter并设置路由规则，配合App.vue中的router-link组件实现不同页面间的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详见vue-router使用方法

在package.json中写入vue-router依赖，命令行执行npm install

  "dependencies": {
    "stylus": "^0.54.5",
    "vue": "^2.5.2",
    "vue-router": "^2.2.0"
  },

App.vue中写入

<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import header from './components/header/header'

export default {
  name: 'App',
  components: {
    'v-header': header
  }
}
</script>

<style lang='stylus' scoped>
#app
  .tab
    display flex
    width 100%
    height 40px
    line-height 40px
    justify-content space-between
    font-size 14px
    .tab-item
      flex 1
      text-align center
</style>

main.js中引入 vue-router并使用

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import goods from './components/goods/goods'
import ratings from './components/ratings/ratings'
import seller from './components/seller/seller'

Vue.use(VueRouter)

const routes = [
  {
    path: '/goods',
    component: goods
  },
  {
    path: '/ratings',
    component: ratings
  },
  {
    path: '/seller',
    component: seller
  }
]

const router = new VueRouter({
  routes
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
    App,
    goods,
    ratings,
    seller
  },
  template: '<App/>'
})

设置路由默认定向goods页，routes配置项中加入redirect（重定向）即可

const routes = [
  {
    path: '/',
    redirect: 'goods'
  },
  {
    path: '/goods',
    component: goods
  },
  {
    path: '/ratings',
    component: ratings
  },
  {
    path: '/seller',
    component: seller
  }
]

设置路由active的class的名字，默认名字是router-link-active

const router = new VueRouter({
  routes,
  'linkActiveClass': 'active'
})