Vue2.0 实战项目 Vue-router

Posted 2020-09-22 寒枫归尘

Vue-router

本次实战项目所使用的Vue-router版本是2.3.1

首先在main.js中引入Vue-router，

import Vue from ‘vue‘;
import Router from ‘vue-router‘;

//如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
//如果使用全局的 script 标签，则无须如此（手动安装）。
Vue.use(Router);

//定义路由
const routes = [
  {path: ‘/goods‘, component: goods},
  {path: ‘/seller‘, component: seller},
  {path: ‘/ratings‘, component: ratings}
];

//创建 router 实例，然后传 `routes` 配置
const router = new Router({
  routes,
  linkActiveClass: ‘active‘
});

//router.push(location)等同于<router-link :to="...">，可以导航到不同的 URL
router.push({path: ‘/goods‘});

//关闭生产模式下给出的提示
Vue.config.productionTip = false;

/* 创建和挂载根实例。
   记得要通过 router 配置参数注入路由，
   从而让整个应用都有路由功能*/
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  template: ‘<App/>‘,
  components: {App}
});

App.vue文件在template中使用 router-link 组件来导航

<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <div class="tab">
      <div class="tab-item border-1px">
        <!-- 使用 router-link 组件来导航. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <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>