1. 基本介绍
官网帮助文档地址: https://router.vuejs.org/guide/
路由的本质就是一种对应关系
,根据不同的URL请求,返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。
在Vue中路由就是控制显示哪个页面。通过路由显示的页面是显示在App.vue中的,这符合SPA,当更改URL后只改变App.vue页面中路由对应的部分的内容,也就是说通过路由显示时也是属于局部刷新效果。
在App.vue中通过<router-view/>显示路由内容。
简单一句话说明:通过识别URL显示页面的功能。
2. 引入依赖
cnpm install vue-router@4
3. router-link基本跳转
实例区
<router-link to = "/login">跳转到登录页</router-link>
路由配置区
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";
/*配置路由*/
let routes = [
{
path: '/login',
name: 'login',
component: () => import('./login.vue'),
},
{
path: '/404',
name: '404',
component: () => import('./404.vue'),
},
{
path: '/:pathMatch(.*)*',
redirect: '/404',
}
]
/*注册路由*/
let router = createRouter({
routes,
history: createWebHistory()
})
createApp (App)
.use(router)
.mount ('#app')
3.1 router-link传参跳转
实例区
<router-link :to = "{name: 'loginA', query: {id: 100, name: 'admin'}}">访问登录窗口</router-link>
组件区
<script setup>
import {useRoute} from "vue-router";
let route = useRoute (); // 获取路由对象
let user = route.query; // 获取参数
</script>
路由配置区
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";
/*配置路由*/
let routes = [
{
path: '/login',
name: 'login',
component: () => import('./login.vue'),
},
{
path: '/404',
name: '404',
component: () => import('./404.vue'),
},
{
path: '/:pathMatch(.*)*',
redirect: '/404',
}
]
/*注册路由*/
let router = createRouter({
routes,
history: createWebHistory()
})
createApp (App)
.use(router)
.mount ('#app')
4. router-view编程式路由基本跳转
注意点
:
必须自定义个一个router-view来作为组件的载体
比如:
<script setup>
</script>
<template>
<router-view></router-view>
</template>
<style scoped>
</style>
实例区
<template>
<button @click = "toVue('/vue1')">跳转组件1</button>
</template>
<script setup>
import {useRoute, useRouter} from "vue-router";
let router = useRouter ();
let toVue = (url) => {
// router.push (name);
// router.push ({name: 'a'});
router.push (
// {name: 'a', params: {id: 1, name: '张三'}}
{path: url, query: {id: 1, name: '张三'}} // path和路由配置的path保持一致 name属性同理 query属性则用于页面之间的参数传递
);
}
</script>
组件区
<script setup>
import {useRoute} from "vue-router";
let user = useRoute().query;
</script>
<template>
<div>
<h1>Vue 1</h1>
<h1>{{user}}</h1>
</div>
</template>
<style scoped>
</style>
路由配置规则
import App from './main.vue'
import {createRouter, createWebHashHistory, createWebHistory,} from 'vue-router' // 引入路由
let routes = [ // 配置路由关系
{
path: '/vue1', // url地址
name: 'vue1', // 定义路由名
component: () => import('./vue1.vue') // 引入组件
},
{
path: '/404',
name: '404',
component: () => import('./components/404.vue')
},
{
path: '/:pathMatch(.*)*',
redirect: '/404'
}
]
// 创建路由
let router = createRouter({
routes, // 变量名相同可以简写
history: createWebHistory() // 地址不带#号
})
createApp(App).use(router).mount('#app')
4.1 嵌套式路由
实例区
<script setup>
import {useRoute, useRouter} from "vue-router";
let router = useRouter (); // 获取路由对象
let toVue = (url) => { // 定义跳转路由的方法
router.push ({path: url, query: {}});
};
</script>
<template>
<el-button type = "primary" @click = "toVue('/register')">访问注册窗口</el-button>
<!--指定渲染区域-->
<fieldset>
<legend>登录注册显示区域</legend>
<router-view name = 'user'></router-view>
</fieldset>
</template>
路由配置规则
import {createApp} from 'vue'
/*引入组件*/
import App from './main.vue'
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";
/*配置路由*/
let routes = [
{
path: '/',
name: 'index',
component: () => import('./index.vue'),
children: [
{
path: '/register',
name: 'register',
components: {user: () => import('./components/register.vue')},
},
],
},
{
path: '/404',
name: '404',
component: () => import('./404.vue'),
},
{
path: '/:pathMatch(.*)*',
redirect: '/404',
}
]
/*注册路由*/
let router = createRouter({
routes,
history: createWebHistory()
})
createApp (App)
.use(router)
.mount ('#app')
OK !!! 收尾!!!
若有误区或不能解决,私信我,远程协助你!!!