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跳转刷新
