vue-router那些事儿

一、vue-router的引用方法
1、用script标签

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2、npm安装

cnpm install vue-router

//在js文件引入
var Vue = require('vue')
var VueRouter = require('vue-router')

Vue.use(VueRouter)

二、我的demo

1、package.json

{
  "name": "vrouter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"  
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "server": "webpack-dev-server --open",
    "build": "webpack-dev-server"
  },
  "author": "camille",
  "license": "ISC"
}

2、webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: "inline-source-map",
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js',
      'vue-router$': 'vue-router/dist/vue-router.common.js'
    }
  }
}

3、index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue router</title>
    <style type="text/css">
     .router-link-active {
        color: red;
     }
    </style>
  </head>
  <body>
    <div id="J_vapp_router">
        <div class="btn-box">
           <button @click="login">登录</button>
           <button @click="registe">注册</button>
        </div>
        <div class="tab-link">
           <router-link to="/users/camille">个人中心</router-link>
           <router-link to="/scanhistory">浏览记录</router-link>
        </div>
        <div class="content">
           <router-view class="view one"></router-view>
           <router-view class="view two" name="rv2"></router-view>
           <router-view class="view three" name="rv3"></router-view>
        </div>
    </div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

注意：如果后面跟表达式，要写:to，如果是固定的字符串，可以直接写to。

4、index.js

var Vue = require('vue')
var VueRouter = require('vue-router')

Vue.use(VueRouter)
// 定义（路由）组件
var rvc1 = { template: '<div>这是路由组件1{{ $route.params.id }}</div>' }
var rvc2 = { template: '<div>这是路由组件2</div>' }
var rvc3 = { template: '<div>这是路由组件3</div>' }

// 定义路由
var routes = [
  {
    path: '/users/:id',
    name: 'personcenter',
    component: rvc1
  }, 
  {
    path: '/scanhistory',
    name: 'scanrecord',
    components: {
      default: rvc1,
      rv2: rvc2,
      rv3: rvc3
    }
  }
]

// 创建router实例
var router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routes
})

// 创建和挂载根实例
// 通过router配置参数注入路由，从而让整个应用都有路由功能。
var vappr = new Vue({
  router: router,
  methods:{
    login: function(){
      this.$router.push({ path: '/users/info', query: { plan: 'private' }})
    },
    registe: function(){
      this.$router.push({ name: 'scanrecord', params: { userId: 123 }})
    }
  }
}).$mount('#J_vapp_router')