2021-11-06 vue笔记-路由vue-router(一) vue-router插件库,SPA,路由定义,vue中配置路由,配置一级路由示例,router-link和router-view用法

0,相关笔记

2022-02-25 Node.js Express框架学习笔记(二) Express路由的定义,路径和句柄

1 相关概念

1.1 vue-router

    vue 的一个插件库，专门用来实现 SPA 应用

1.2 SPA

对 SPA 应用的理解

    1. 单页 Web 应用（ single page web application，SPA）。
    2. 整个应用只有 一个完整的页面 。
    3. 点击页面中的导航链接 不会刷新 页面，只会做页面的 局部更新。(特点)
    4. 数据需要通过 ajax 请求获取。

单页面应用和多页面运用的区别:

1.3 路由

    1. 什么是路由?
            1. 一个路由就是一组映射关系（key - value）
            2. key 为路径, value 可能是 function 或 component
    2. 路由分类
            1. 后端路由：
                    1) 理解：value 是 function, 用于处理客户端提交的请求。
                    2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。
            2. 前端路由：
                    1) 理解：value 是 component，用于展示页面内容。
                    2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

2.vue路由配置

2.1.步骤(需提前安装vue-router)

• 在vue项目中创建src/router文件夹,并创建index.js文件(路由器)
• 在views下创建xxxx.vue路由(编写路由器中的路由们)
• 在main.js中注册路由(import router from './router’和 router:router)
• 在App.vue中使用路由(用到router-view)
  总结来说就是配置路由,引入路由,使用路由

2.2.示例:配置几个一级路由到页面中使用

2.2.1.src/router/index.js

// 引入vue-router
import VueRouter from "vue-router"
// 引入路由
import Film from '../views/Film'
import Cinema from '../views/Cinema'
import Center from '../views/Center'

//创建路由对象router
const router = new VueRouter({
	//配置路由路径
    routes: [
        {
            path: '/Film',
            component: Film
        },
        {
            path: '/Center',
            component: Center
        },
        {
            path: '/Cinema',
            component: Cinema
        }
    ]
})
// 路由引出
export default router;

2.2.2.src/views/xxxx.vue

Film.vue

<template>
  <div>
    film
  </div>
</template>

Cinema.vue

<template>
  <div>
    cinema
  </div>
</template>

Center.vue

<template>
  <div>
    center
  </div>
</template>

2.2.3.src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
Vue.config.productionTip = false;

new Vue({
    el: '#app',  
    //router: router
    //ES6对象简写:配置和变量名字一样时可以简写
    router,
    render: h => h(App)
})

2.2.4.src/App.vue

<template>
  <div id="app">
    <!-- router-link:具有路由功能的应用中点击导航 -->
    <router-link to="/Film">电影页面</router-link>
    <router-link to="/Cinema">附近影院</router-link>
    <router-link to="/Center">个人中心</router-link>
      <h1>内容展示区域</h1>
      <!-- router-view(路由容器):把写好的如有加载到此处,类似插槽 -->
      <router-view></router-view>
  </div>
</template>

2.2.5 结果

3.相关知识点

3.1.views和components分别存放的组件类型

views文件夹:放页面级的组件如Film.vue,home.vue等等
components文件夹:放共用的组件如选项卡,轮拨图等等功能性组件

3.2.router-link和router-view的用法

路由指的是组件和路径的一种映射关系。

• router-view:
  router-view也被称为路由的出口,把写好的如有加载到此处,类似插槽
• router-link:
  <router-link>组件支持用户在具有路由功能的应用中点击导航。
  通过to属性指定目标地址，默认渲染为带有正确连接的标签

示例:上例中的router-link放在一个独立组件moviebar中引入

App.vue

<template>
  <div id="app">
    <!-- 路由容器:把写好的如有加载到此处,类似插槽 -->
    <!-- <router-link to="/Film">电影页面</router-link>
    <router-link to="/Cinema">附近影院</router-link>
    <router-link to="/Center">个人中心</router-link> -->
    <!-- 3.组件调用 -->
    <moviebar></moviebar>
    <div>
      <h1>内容展示区域</h1>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
// 1.组件引入
// import moviebar from "./components/moviebar"
// 可以用@指代src绝对路径
import moviebar from "@/components/moviebar"
export default {
  //2.组件注册
  components:{
    // moviebar:moviebar,简写:
    moviebar
  }
};
</script>

components/moviebar.vue

<template>
  <div>
    <ul>
      <!-- 写法一:li>a -->
      <!-- <li><a href="#/Film">热映影片</a></li>
      <li><a href="#/Cinema">附近影院</a></li>
      <li><a href="#/Center">个人中心</a></li> -->
      <!-- 写法二:li>router-link -->
      <!-- <li><router-link to="/Film">热映影片</router-link></li>
      <li><router-link to="/Cinema">附近影院</router-link></li>
      <li><router-link to="/Center">个人中心</router-link></li> -->
      <!-- 写法三:router-link的tag=li -->
      <router-link to="/Film" tag="li" active-class="myactive">热映影片</router-link>
      <router-link to="/Cinema" tag="li" active-class="myactive">附近影院</router-link>
      <router-link to="/Center" tag="li" active-class="myactive">个人中心</router-link>
    </ul>
  </div>
</template>
<style  scoped>
.myactive{
  background: red;
}
</style>

3.3.ES6的对象简写

示例

ES5:

var objES5 = {
	name: 'zs',
	age: 20,
	getName: function () {
	  return this.name;
	}
}

ES6:

var name = 'zs', age = 20;
const objES6 = {
	name,// 同名的属性可以省略不写
	age,
	getName() {// 可以省略方法中的 : function
	  return this.name;
	}
};

结论

ES6中的对象,

• 同名的属性可以简写
• 对象方法中的 : function 可以省略不写