vue-router路由

最新推荐文章于 2024-11-19 07:37:58 发布

m0_66357705

最新推荐文章于 2024-11-19 07:37:58 发布

阅读量1.5k

点赞数 25

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_66357705/article/details/142187352

版权

vue-router

路径和组件的映射关系
根据路径来确定要渲染的组件

初始配置

下载
- npm add viu-router@3.5.6
引入
- import VueRouter from 'vue-router'
安装注册
- Vue.use(VueRouter)
创建路由对象
- const router = new VueRouter({路由配置})

注入,将路由对象与Vue实例,建立关系

new Vue ({
    render:h => h(App),
    router:router
})

vue-router配置项

new VueRouter({配置项})

配置项	类型	描述	默认值
`mode`	string	路由模式，可选值为 `"hash"` 或 `"history"`。	`"hash"`
`base`	string	应用的基路径，用于部署到非根路径的单页面应用。	无
`linkActiveClass`	string	路由链接激活状态时的类名。	`"router-link-active"`
`linkExactActiveClass`	string	路由链接未激活状态时的类名。	“`router-link-exact-active`”
`scrollBehavior`	function	定义路由跳转时滚动条的行为。	无
`parseQuery`	function	自定义查询字符串的解析方式。	无
`stringifyQuery`	function	自定义查询字符串的字符串化方式。	无
`routes`	Array[RouteConfig]	定义路由规则的数组。	必须提供
`fallback`	boolean	(Vue Router 4) 指定是否在 `history` 模式下回退到 `hash` 模式。	`false`

mode -路由模式

import VueRouter from 'vue-router'
const router = new VueRouter({
    routes,
    mode:'history' //  mode:'hash'
    
})

hash路由(默认)

httpt带有 # :http://localhost:8080/#/homeme

history路由(常用)

http://localhost:8080/homeme

routes配置

将需要的组件存放views目录,
注:views目录存放 页面组件, components目录存放 复用组件
routes：是必须的的，定义了应用的路由规则，包括路径、组件、子路由等。

钩子

钩子名称	调用时机	参数	描述
全局守卫			const router = new VueRouter({ // …其他配置 }); router.beforeEach((to, from, next) => { // … }); // 添加全局前置守卫
`beforeEach`	在路由跳转之前调用，全局生效。	`(to, from, next)`	可以访问所有路由跳转，进行权限检查、重定向等。
`beforeResolve`	在解析异步路由/组件之后调用，全局生效。	`(to, from, next)`	所有守卫执行完后调用，用于访问异步路由。
`afterEach`	在路由跳转之后调用，全局生效。	`(to, from)`	导航完成后调用，用于处理导航后的操作。
路由独享守卫
`beforeEnter`	在路由跳转之前调用，仅对当前路由生效。	`(to, from, next)`	可以访问当前路由，进行权限检查、数据预加载等。
组件内守卫
`beforeRouteEnter`	在渲染组件之前调用，无法访问 `this`。	`(to, from, next)`	在渲染该组件的对应路由被确认前调用。
`beforeRouteUpdate`	当路由改变且该组件被重用时调用，可以访问 `this`。	`(to, from, next)`	路由参数或查询变化时调用。
`beforeRouteLeave`	导航离开该组件的对应路由时调用，可以访问 `this`。	`(to, from, next)`	导航离开该组件的对应路由时调用。

参数说明

to: Route：即将去往的路由对象。
from: Route：来自哪个路由。
next: Function：必须被调用，以解析该钩子。执行效果依赖 next 方法的调用参数。

next 方法的调用方式

next()：无参数，继续解析当前的路由。
next(false)：取消当前的导航。
next('/') 或 next({ path: '/' })：跳转到一个不同的路径。
next(error)：如果传入一个错误对象，导航将中止，并且错误将被传递给 router.onError 配置的回调。

属性

属性名	类型	描述	默认值
`path`	string	路径字符串，用于匹配 URL。	无
`name`	string	路由的名称，用于路由跳转。	无
`component`	Component	路由匹配时渲染的组件。	无
`components`	Object	包含命名视图的路由，键是视图的名称，值是组件。	无
`redirect`	string/object	重定向目标，可以是路径字符串或重定向描述对象。	无
`props`	boolean/object	是否将路由参数作为 props 传递给组件。	`false`
`alias`	string/array	设置路由别名。	无
`children`	Array[RouteConfig]	子路由配置，用于嵌套路由。	无
`meta`	any	路由元信息，可用于传递任意额外信息。	无
`beforeEnter`	Function	路由独享的守卫。	无

path:`*` -404

VueRouter 是从上向下寻找的

import VueRouter from 'vue-router'

const router = new VueRouter({
    routes:[
        {path: '/', component:home},
        ...
        {path:'*',component:NoFind}
    ]
})

当从上向下搜索时如上面都没有匹配的将于 *匹配

路由参数传递

查询参数传递

<router-link to='/home?参数名=值'>主页</router-link>
$route.query.参数名

动态路由传递

配置路由

import VueRouter from 'vue-router'
const router = new VueRouter({
    routes:[
        {path:'/home/:参数名2',name:'home', component:Home}
    ]
})

<router-link to='/home/值'>主页</router-link>
$route.params.参数名2

$router 对象

方法

`$router.push()`

$router.push(location,onComplete?,onAbort?)

用于编程式导航，模拟点击浏览器的前进按钮。
location 可以是一个字符串路径，或者一个描述目标位置的对象。
- {name: ‘路由名’}
onComplete 和 onAbort 是可选的回调函数，分别在导航成功或失败时调用。

// 字符串路径
$router.push('/users/eduardo')

// 带有路径的对象
$router.push({ path: '/users/eduardo?id=123' })

// 命名的路由，并加上参数，让路由建立 url
$router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
$router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
$router.push({ path: '/about', hash: '#team' })

`$router.go()`

$router.go(n)

相当于浏览器的后退和前进按钮。
n 参数表示要向后（n > 0）或向前（n < 0）移动的历史记录数。

`$router.back()`

$router.back()

后退到浏览器历史记录中的前一个记录。

`$router.forward()`

$router.forward()

前进到浏览器历史记录中的下一个记录。

属性

`$route.query`

它包含了 URL 查询字符串中的参数。查询字符串是 URL 中 ? 后面的部分，由键值对组成，键和值之间用 = 连接，不同键值对之间用 & 连接。
URL http://example.com/?name=vue&age=5，$route.query
$route.query : { name: "vue", age: "5" }

`$route.params`

它包含了路由中的动态片段（也称为路由参数）的值。动态片段是在路由路径中用冒号 : 标记的部分。
例如，对于路由配置：
- { path: '/user/:id', component: User }
URL http://example.com/user/123
- $route.params:{ id: “123” }`

示例

import VueRouter from 'vue-router'
import Home for '@/views/Home'
const router = new VueRouter({
    routes:[
        {path:'/home',name:'home', component:Home,
        children:{
            
        }
        },//path:为路由url  name:路由名称方便跳转 component:路由组件
        {path:'/',redirect:'/home'}
        
    ]
    linkActiveClass:'active',
    linkExactActiveClass:'active'
    
})

//根目录 App.vue
<tempalte>
	<div>
    <div>
        <!-- 默认提供高亮 -->
       <router-link to='/home'>主页</router-link>
       <!-- 都可以跳转 -->
       <a href="#/home">主页</a>
    </div>
    <!-- 路由出口  -->
	 <router-view></router-view>
    
   </div>
</tempalte>

<script>

</script>