首页 > 代码库 > Vue2.0 实战项目(四) Vue-router

Vue2.0 实战项目(四) Vue-router

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>

 

Vue2.0 实战项目(四) Vue-router