VUE vuerouter的介绍的介绍 基于vuerouter实现路由跳转以及路由跳转的时候携带参数传递

1.VueRouter（路由）

2.SPA

首页我们知道Vue是单页面应用程序，所谓单页面应用程序在一个完整的应用或站点中，只有一个完整的HTML页面，这个页面有一个容器，可以把需要的代码插入到该容器中

3.SPA 工作原理

例如：http://localhost:8081/#/test
(1)根据地址栏中URL解析完的页面index.html,加载index.html
(2)根据地址栏解析#后的路由地址：test;根据路由地址，去当前应用的配置中找路由地址配置对象去查找对应的模块页面地址，发起异步请求加载该页面地址 (3)把请求的数据加载到指定的容器中

4.SPA的实现步骤

(1)使用Vue-router的前提是已经引入vue-router.js
(2)显示组件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

(3)创建Vue 组件

(4)配置信息 （配置路由词典）

 const  myroutes= [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'test',
      component: test
    }
  ]

(5)创建路由表对象

const Router =  new VueRouter({
routes:  myroutes
})

(6)在Vue对象添加现在应用路由表对象

new Vue({el:'#app',router:newrouter})

在Vue中也可以这样写：
router->index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'test',
      component: test
    }
  ]
})

main,js

import Vue from 'vue'
import App from './App'
import router from './router'
// import router from '../src/router/index.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5.路由跳转

使用路由切换的提前是已经添加到路由词典中

(1)使用router-link

<router-link to='/test'>跳转路由test</router-link>

(2)使用js

<button @click="jump">路由</button>
  jump(){
    this.$router.push('/test')
  },