Vue Router 第一章 入门

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

Vue Router 属于前端路由，可以通过不同的URL访问不同的页面， 也可以实现在不刷新单页的情况下进行多视图管理。

1、安装：

  在vue3版本下：  npm install vue-router@4 

  在vue2版本下：  npm install vue-router@3

  或者 ：npm install vue-router --save

2、 创建页面

现在建立两个页面，（正常项目中先建立页面），一个是登录页面login.vue，一个是首页页面home.vue

login.vue

<template>
    <div>
     <h2>你好这是登录页</h2>
    </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

home.vue

<template>
    <div>
        <h2>你好这是首页</h2>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

编写完页面之后 ， 可以将这些页面地址配置到路由配置文件中。

 3、在src目录下新增文件夹router ，在router文件夹下增加路由配置文件index.ts，然后保存

     路由页面的映射信息在此配置。

//路由配置项文件
//引入路由对象
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory, RouteRecordRaw } from 'vue-router'
 
//vue2 mode history vue3 createWebHistory
//vue2 mode  hash  vue3  createWebHashHistory
//vue2 mode abstact vue3  createMemoryHistory
 
//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
    path: '/',
    component: () => import('../components/login.vue')
},{
    path: '/home',
    component: () => import('../components/home.vue')
}]
 
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
//导出router
export default router

4、在主程序入口 main.ts文件中引入路由配置文件并挂载

     注意：引入的路由配置属性名称为 路由配置文件中导出的路由对象名称 

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router' //导入路由配置文件

//挂载路由配置文件
createApp(App).use(router).mount('#app')

router-link和router-view

router-link： 我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

router-view： 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

router-link的其他属性：

router-link 默认会渲染成 a 标签，但是有时候你想渲染成别的标签也是可以的。

to属性

表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
 
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
 
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
 
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
 
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
 
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

tag 属性  

tag属性是用来设置 router-link 标签渲染类型的，如我们想把 router-link 渲染成 button，如：

<router-link to="/home" tag="button">首页</router-link>

查看渲染后的元素，发现变成 button 标签了，对应的 to 添加的属性值就会失效。此时点击无法跳转到对应内容，可继续阅读下边跳转方式。
除了 button ，tag 的属性值还可以是其他任意标签，router-link 自动渲染成对应的标签。

replace 属性
replace与 history 模式中的 replaceState 对应，会调用 router.replace() 而不是router.push()，跳转的时候不会留下 history 记录，指定replace 的情况下，不能返回上一页。

<router-link to="/home" replace>首页</router-link>

active-class
active-class 设置 router-link 点击当前选中的类名，默认情况下类名为：router-link-active

<a href="#/" 
 aria-current="page" 
 class="router-link-exact-active router-link-active">
 首页
</a>

设置当前元素样式需要设置到：router-link-active。
设置 active-class ，如：

<router-link to="/" active-class="active">首页</router-link>
// router-link-active 类名会被替换成 active

如果需要把全局的 router-link 的选择类名都修改成自定义的，一个一个单独设置工作量太大，可以在 router 中统一设置。

const router=new VueRouter({
 routes,
 mode: 'hash',
  linkActiveClasss: 'active' //统一设置类名
})

App.Vue中的代码

<script setup lang="ts">
</script>

<template>
  <div>
    <!-- <login></login> -->
   <h1>路由 Demo1</h1>
   <router-link to="/" tag="div">登录</router-link>
   <router-link to="/home" tag="div" style="margin-left:40px">首页</router-link>
   <hr/>
   <div>
    <router-view></router-view>
   </div>
  </div>
 
</template>

<style scoped>
</style>

路由方法：

1、push()

// 字符串
      this.$router.push('home')
// 对象
      this.$router.push({ path: 'home' })
// 命名的路由  变成 /user/123
      this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123
      this.$router.push({ path: 'register', query: { plan: '123' }})

注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

2、go()

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

3、replace()

push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录

一般使用replace来做404页面

this.$router.replace(’/’)