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')

秒客网

vue-router那些事儿

相关文章