基于vue-cli脚手架使用vue-router路由

 2018/05/19   Share

上一个讲了 vue-cli 的安装方式，我们就趁热打铁，来学习一下，vue-router 的使用方法，首先我们需要安装一下路由需要安装到生产环境下的，执行以下命令

$ npm i vue-router

我们安装完路由之后就要去使用它，再次声明这个是基于 vue-cli 来配置的所以我们应该先去 src目录下有一个叫main.js 文件去进行配置

Alt text

import App from './App'; // 最大的组件
import VueRouter from 'vue-router' // 先引入要用的vue-router
import Commodity from './components/commodity/commodity.vue' // 引入你跳转的那个组件页面我这一共是三个
import Comment from './components/comment/comment.vue'
import Merchant from './components/merchant/merchant.vue'

// new Vue({
    // el:'body' 这个就可以删掉了，因为我们已经用Vue.extend方法绑定了
// })

let app = Vue.extend(App) // 先绑定App这个组件

router.map({
    '/Commodity': {
        component: Commodity
    },
    '/Comment': {
        component: Comment
    },
    '/Merchant': {
        component: Merchant
    }
})

router.start(app, #app) // 这句话是开始使用的意识，绑定app，如果报错了的话，可以去你项目个目录的index.html 文件，加上 <div id="app"></div> 就好了
             
// 我们也可以指定你想要跳转的路由页面用这个方法
router.go('/Component') // 这样就可以指定路由页面了

我们基本的路由页面就搭建好了，赶紧试试吧

CATALOG

