vue路由配置和使用

安装

本地环境安装路由插件vue-router： cnpm install vue-router --save-dev

路由文件配置

路由文件：src/router/index.js中的

import Vue from 'vue'     //前提条件引入vue文件①
import Router from 'vue-router'    //引入②
import HelloWorld from '@/components/HelloWorld'    //组件地址④
//注册③
Vue.use(Router)

export default new Router({⑤
  routes:[
    {
      path: '/',     定义url地址
      name: 'Helloword',
      component:HelloWorld     //使用的组件
    }
  ]
})

入口文件配置 src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'      //引入文件 ①

Vue.config.productionTip = false

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

App.vue

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

路由地址跳转切换

//url跳转
<router-link  to="/">切换到Home页面</router-link>
// 路由配置的name名
<router-link  :to="{name:'asios'}">切换到asios页面</router-link>

// js方式
this.$router.push({path: '/asios'})

路由携带参数 和 接收参数

1. 携带参数
   方式一：

this.$router.push({path: '/asios', query: {sex: '男'}})
// query会在url上拼接

方式二：

<router-link  :to="{path:'/asios', params:{name:'Lily'},query:{sex:'女'},props:{age:18}}">
	切换到asios页面
</router-link>

2. 接收参数

• this.$route.params获取路由传递参数
• this.$route.query获取路由传递参数

总结

总结：

1. this,$router.push进行编程式路由跳转
2. router-link进行页面按钮式路由跳转
3. this.$route.params获取路由传递参数
4. this.$route.query获取路由传递参数
5. params和query都是传递参数区别在于params不会再url上显示出现，
   并且params参数是路由的一部分，是一定要存在的，否则无法显示视图。
   query则是我们通常看到的url后面跟上的？后跟的显示参数

补充说明

$route:路由信息对象，只读对象；

$router:路由操作对象 ，只写对象。