vue-router@4的使用及理解

1.vue-router是什么？

●vue-router是Vue.js官方的路由插件，适合用于构建单页面应用，则是路径之间的切换，也就是组件的切换

2.vue-router两种模式

2-1.hash

使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面；

2-2.history

使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面；

3.如何创建路由

3-1安装路由

cnpm i vue-router@next  -S

3-2创建路由文件

//createWebHistory 路由模式history

//createWebHashHistory 路由hash模式

import { createRouter,createWebHistory } from 'vue-router'

import  Home  from   '../view/Home.vue ';

import  About   from '../view/About.vue';

const routes=[{

path:'/',

name:"Home",

compontent:Home,

children:[

{

path:'user',

name:'User',

compontent: () => import( '../views/user.vue')

}

]

},{

path:'/About',

name:'About',

compontent:About

}];

3-3主文件引入路由

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

createApp(App).use(store).mount('#app')

4.页面使用路由

import { useRouter ,useRoute} from 'vue-router'

export defalut {

setup(){

const router=useRouter();

const route =useRoute();

}

}

4-1.路由展示位置

4-1-1

<router-view/> 

4-1-2  同一个页面使用多个路由

import  main from './main.vue';

import   left    from  './left.vue';

import right from './right.vue';

const routes=[{

path:'./',

name:'Home',

compontents:{

default:main, 

 left: left, 

 right: right,

}

}]

<router-view></router-view>

<router-view name="left"></router-view>

<router-view name="right"></router-view>

4.2 跳转路由

 4-2-1 : <router-link to="/">Home</router-link>

4-2-2:query传参

 router.push({

path:'/About',

query:{

 id:id,

username:username

  }

})

4-2-3 params传参

.注 如果用params传参注意路由配置的需要这么写

const routes=[{

path:'/About/:id/username'

}]

router.push({

path:'/About',

params:{ 

 id:id,

username:username

  }

})

4-2-4两种有什么差别吗

1.query跳转不刷新

2.params跳转刷新