vue-router 安装与使用

目录

一、安装

二、使用

1.初始化router/index.ts文件内容

2.在根组件App.vue 定义路由渲染区域 router-view

3.在main.ts中引入路由配置，并使用

4.启动访问浏览器进行测试 /page1,/page2

 三、路由模式

 1.hash模式

2.history模式

四、路由导航

1.router-link

2.编程式导航 使用 router.push

---

一、安装

 npm i vue-router

二、使用

1.初始化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


// 路由配置数组
const routes:Array<RouteRecordRaw>=[
    {
        path:'/',
        component:()=>import('@views/router-demo/index.vue')
    },
    {
        path:'/page1',
        component:()=>import('@views/router-demo/page1.vue')
    },
    {
        path:'/page2',
        component:()=>import('@views/router-demo/page2.vue')
    },
];
// 项目路由对象
const router = createRouter({
    history:createWebHashHistory(),
    routes
})

// 导出
export default router;

2.在根组件App.vue 定义路由渲染区域 router-view

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup

</script>

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

<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>

3.在main.ts中引入路由配置，并使用

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'
createApp(App).use(Router).mount('#app')

4.启动访问浏览器进行测试 /page1,/page2

 三、路由模式

 1.hash模式

vue3.x版本代码

import { createRouter, createWebHashHistory} from 'vue-router'
const router = createRouter({
    history:createWebHashHistory(),
    routes:[]
})

vue2.x版本代码

import Router from 'vue-router';
const router = new Router({
	mode: 'hash',
	routes: []
})
 

原理：

对hashchange事件的监听

window.addEventListener('hashchange',(e) => {
	console.log('旧url: ',e.newURL)
	console.log('新url: ', e.oldURL)
},false)

特点：

1、hash的改变不会触发页面的重新加载，不会对html文档发起新的请求。
2、hash的改变都会在浏览器历史中增加一条记录，可以点击浏览器的返回、前进回到相应界面。
3、hash模式支持低版本浏览器。

2.history模式

 vue3.x版本代码

import { createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
    history:createWebHistory(),
    routes:[]
})

vue2.x版本代码

import Router from 'vue-router';
const router = new Router({
	mode: 'history',
	routes: []
})
 

原理：

通过调用window.history API对象上的一系列方法来实现页面的无刷新跳转。

window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

特点：

1.url 改变时，不会刷新页面，但是如果刷新页面，会发起一个全路径请求，如果后端不处理，会404报错。

2.对低版本浏览器支持较差

四、路由导航

1.router-link

<template>
        <div>
            <router-link to='/page1'>page1</router-link>
            <router-link to='/page2'>page2</router-link>
        </div>
</template>
    
<script setup lang='ts'>
    
</script>
    
<style>
    
</style>

2.编程式导航 使用 router.push

<template>
    <Button  @click="fullPathJump">fullPathJump</Button>
    <Button  @click="pathObjJump">pathObjJump</Button>
    <Button  @click="nameObjJump">nameObjJump</Button>
</template>
    
<script setup lang='ts'>
    import {useRouter} from 'vue-router'

    const router = useRouter();
    // 传递全路径跳转
    const fullPathJump = ()=>{
        router.push('/page1')
    }
    // 传递对象格式跳转
    const pathObjJump = ()=>{
        router.push({
            path:'/page1'
        })
    }
    // 传递路由名称跳转
    const nameObjJump = ()=>{
        router.push({
            name:'page1'
        })
    }
</script>
    
<style>
    
</style>