vue工程学习（5）之插件Router路由使用

vue工程学习（5）之插件Router路由使用

前言

这个是使用cli3创建的vue工程

vue-router官网地址：https://router.vuejs.org/zh

1.vue-Router介绍

说明

Vue路由即vue-router，在web开发中，“router”是指根据url分配到对应的处理程序。

Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图。简单来说就是：路由模块的本质 就是建立起url和页面之间的映射关系

为什么要使用路由？

在传统的web开发中每一个请求地址都会请求服务器来进行处理，但是用户有些操作则无需请求服务器，直接页面端修改下逻辑就能达到目的，在这种方式下最好的方法是使用路由，因为使用路由时，URL会随着改变，用户浏览一个网页时可以直接复制或收藏当前页面的URL给别人，这种方式对于搜索引擎和用户来说都是友好的，这也是现在前端框架的好处之一

2.安装Router路由

命令：npm install vue-router
安装成功：在package.josn会有引包

3.使用router路由

1）在项目的src中，新建文件夹router/index.js

2）编写index.js，如果有学java的同学，我们会发现这个路由有点MVC的controller控制器，像controller定义
这里我已经创建了两个组件MyFirst.vue和MyTwo.vue
MyFirst.vue（MyTwo.vue一样的，改一下内容就行）

<template>
  <div>
    <h1>MyFirst</h1>
  </div>
</template>

<script>
export default {
  name: 'MyFirst',
};
</script>

index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import MyFirst from '../components/My/MyFirst.vue';
import MyTwo from '../components/My/MyTwo.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/one',
      name: 'MyFirst',
      component: MyFirst,
    },
    {
      path: '/two',
      name: 'MyFirst',
      component: MyTwo,
    },
  ],
});

3）开始使用router路由，在main.js引入router
main.js

import Vue from 'vue';
import App from './App.vue';
//引入路由
import router from './router';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
  router,//引入路由
}).$mount('#app');

4）路由的跳转需要用到标签：router-link（定义路由）和router-view（接收展示视图）
跳转的方式有两种：一个声明式跳转用router-link，另一个是this.$router.push（）
App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="哈哈哈"/>
    <router-link to="/one">one-声明式</router-link>
    <br/>
    <button @click="toTwo">two-编程式</button>
    <router-view/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  methods: {
    toTwo() {
      this.$router.push({ path: '/two' });
    },
  },
};
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

整体目录结构

访问：localhost:8080可以展示效果

4.路由传参

两个方式传参：声明式传参和编程式传参
样例：App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="哈哈哈"/>
    <router-link :to="{name :'MyFirst', params: {id:'我是MyFirst传参'}}">one-声明式-传参</router-link>
    <br/>
    <button @click="toTwoParams">two-编程式-传参</button>
    <router-view/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  methods: {
    toTwoParams() {
      this.$router.push({ name: 'MyTwo', params: { id: '我是MyTwo传参' } });
    },
  },
};
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

在MyFirst.vue和MyTwo.vue代码，接收参数直接用：

{{$route.params.id}}

注：
在使用时，你用要属性name，不能用path，使用path，要在路由定义加：”/one/:id“，使用：id来接收或者是query
对应关系就是：

• name匹配params
• path匹配query