Vue11 VueRouter Part1 概述 & 入门

Posted 2020-12-18 mindzone

什么是路由？

即通过互联网把信息从源地址传输到目的地址的活动

路由决定数据包从来源到目的地的路径

转送将输入端的数据转移到合适的输出端

 

后端路由：

早起网站开发全部由服务器渲染，例如

Java的JSP，.NET的ASP，php

服务器直接生产渲染好的html页面，返回给客户端展示

一个网站非常多的页面，服务器如何处理？
每个页面都有自己对应的网路地址URL：

Url会发送到服务器，服务器根据URL进行匹配，并且交给一个Controller进行处理

控制器处理之后最终生成数据或者页面，返回给前端

 

好处：

有利于SEO优化

缺点：

整个页面开发，由后端程序员编写和维护
前端人员开发页面必须掌握后端语言才可以开发
逻辑和数据混杂一起，维护困难

前端路由：

Ajax使得数据的传输不再需要服务器编写服务器页面，后端只提供API（地址）传输数据

前端使用Ajax接收数据：再使用javascript渲染数据

优点：

职责明确，后端专注逻辑与数据，前端专注于渲染，可视化，用户体验
移动端出现后，后端不需要任何处理，继续使用之前的API即可
前后端是一个趋势

 

【Vue - Router】

Vue开发属于前后端分离的单页面应用，由前端来维护路由

通过改变url而页面不进行整体的刷新

 

目前流行的前端三大框架：都由自己的路由实现：

Angular : ngRouter
React : reactRouter
Vue : vue-router

vue-Router是vue官方提供的路由插件，和vue本身深度集成

适用于单页面构建：

vue-Router单页应用，页面的切换，即组件的切换：

 

【安装vue-router】

新建一个项目

vue create 项目目录名称

npm install vue-router --save

1、导入路由对象，调用Vue.use(VueRouter)

2、创建路由实例，传入路由映射配置

3、在Vue中挂载创建的路由实例

 

创建router目录和index.js

index.js编写：

import Vue from ‘vue‘;
import VueRouter from "vue-router"; // 导入路由插件

Vue.use(VueRouter); //注入路由插件
const routes = []; // 定义路由
const router = new VueRouter({ // 创建路由实例
    routes
});
export default router; // 导出路由实例

在main.js引入路由：

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from "./router"; // ./router/index.js 因为是index.js，可以默认不写

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount(‘#app‘)

 

删除HelloWorld.vue

在App.vue取消组件：

<template>
  <div id="app">
  </div>
</template>

<script>
  // import HelloWorld from ‘./components/HelloWorld.vue‘

export default {
  name: ‘App‘,
}
</script>

<style lang="stylus">
#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>

 

创建一个首页组件和一个样本组件

<template>
    <div>
        <h2>这是首页组件</h2>
        <p>这是首页的内容</p>
    </div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>

</style>

样本：

<template>
    <div>
        <h2>样本的标题</h2>
        <p>样本的标签</p>
    </div>
</template>

<script>
    export default {
        name: "sample"
    }
</script>

<style scoped>

</style>

 

【使用vue-router】

使用步骤：

1、创建路由组件：

2、配置路由映射，将路由和组件进行关联

3、使用路由

 

配置路由（index.js）：

import Vue from ‘vue‘;
import VueRouter from "vue-router"; // 导入路由插件

// 导入路由组件
import home from "../components/home"; 
import sample from "../components/sample";

Vue.use(VueRouter); //注入路由插件

const routes = [ // 定义路由
    { path : ‘/home‘, component : home },
    { path : ‘/sample‘, component : sample }
];

const router = new VueRouter({ // 创建路由实例
    routes
});

export default router; // 导出路由实例

两个必要的组件：

router-link : 设置路由跳转
router-view : 显示当前路由组件

使用组件（App.vue）：

<template>
  <div id="app">
      <h2>这是App.vue组件的标题</h2>
      <router-link to="/home"> 首页 </router-link>
      <br>
    <router-link to="/sample"> 样本 </router-link>

    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: ‘App‘
}
</script>

<style lang="stylus">
#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>

启动项目，访问页面：

当点击样本时：

【Router设置首页默认路径】

import Vue from ‘vue‘;
import VueRouter from "vue-router"; // 导入路由插件

import home from "../components/home";
import sample from "../components/sample";

Vue.use(VueRouter); //注入路由插件
const routes = [
    { path : ‘/‘, redirect : home },
    { path : ‘/home‘, component : home },
    { path : ‘/sample‘, component : sample }
]; // 定义路由
const router = new VueRouter({ // 创建路由实例
    routes
});
export default router; // 导出路由实例

访问/重定向到home

 

默认情况，路径的改变使用的是URL的hash,如果我们希望使用的是H5的History模式，

可以进行如下配置：

import Vue from ‘vue‘;
import VueRouter from "vue-router"; // 导入路由插件

import home from "../components/home";
import sample from "../components/sample";

Vue.use(VueRouter); //注入路由插件
const routes = [
    { path : ‘/‘, redirect : home },
    { path : ‘/home‘, component : home },
    { path : ‘/sample‘, component : sample }
]; // 定义路由
const router = new VueRouter({ // 创建路由实例
    routes,
    mode : ‘history‘
});
export default router; // 导出路由实例

 

【Router-Link再补充】

to属性就是a标签的href属性，值是具体的访问地址

其他属性：

tag
    指定router-link会被渲染成什么标签，默认a标签
例如：
    <router-link to="/sample" tag="li> 样本 </router-link>

active-class    
    被点击后自动给当前元素设置一个router-link-active的class
    作用是改变激活状态下的显示