Vue学习记录(Day.5)

VueCLI3创建项目和路由的相关知识

（webpack不在描述，后期集成在Vue项目中）

1.VueCLI3创建项目

2.路由的相关知识

2.1什么是路由

路由是网络工程里的一个术语，是通过互联的网络把信息从源地址传输到目的地址的活动。

前端路由：当页面中需要请求不同的路径内容时，交给服务器处理，服务器渲染好整个页面，并将该页面返回给客户端。

后端路由：改变url但是页面不进行整体的刷新。

2.2vue-router基本使用

路由用于设定访问路径，将路径和组件映射起来，在vue-router的单页面应用中页面的路径的改变就是组件的切换。

一：配置路由相关信息

//配置路由相关的信息
//导入路由
import VueRouter from 'vue-router'
import Vue from 'vue'

//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter)

//2.创建路由对象
const routes = [

]
const router = new VueRouter({
  //配置路径和组件的映射关系
  routes
})

//3.将router对象传入到Vue实例
export default router

二：使用vue-router

1.创建路由组件

<template>
  <div>
    <h2>我是Home</h2>
    <p>我是Home内容</p>
  </div>
</template>

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

<style>
</style>


<template>
  <div>
    <h2>我是About</h2>
    <p>我是About内容</p>
  </div>
</template>

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

<style>
</style>

2.配置映射关系

//配置路由相关的信息
//导入路由
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter)

//2.创建路由对象
const routes = [
  {
    path:'/home',
    component:Home 
  },
  {
    path:'/about',
    component:About
  }
]
const router = new VueRouter({
  //配置路径和组件的映射关系
  routes
})

//3.将router对象传入到Vue实例
export default router

3.使用路由

<template>
  <div id="app">
    <router-link to="home">首页</router-link>
    <router-link to="about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>

</style>

router-link补充:

1.tag:tag可以指定<router-link>之后渲染成什么组件

2.replace:replace不会留下history记录,所以指定replace的情况下,后退返回键不能返回到上一个页面中

3.active:当router-link对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称

2.3vue-router嵌套路由

2.4vue-router参数传递

2.5vue-router导航守卫A

2.6keep-alive