vue路由

 安装

npm install vue-router@4

 Vue Router 是vue.js的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举

功能包括:

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由vue.js的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活css类的链接
  • HTML5 history模式或hash模式
  • 可定制的滚动行为
  • url的正确代码

vue3加了俩新的生命周期钩子

1、作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。

2、具体名字:

actived:路由组件被激活时触发;

deactived:路由组件失活时触发。

最常见使用:

在一个后台项目里,通常有上左右、左上右或者简单的上下的界面结构,如图:

vue路由_第1张图片

 那么,main就是真正需要显示页面的地方,也就是说,所有的页面,都是加载在main下的这个router-view节点,这是router-view基础用法之一,作为根节点使用,他会把当前路由的页面,替换到这个节点下。

补充:关于组件和页面组件

组件分为页面组件功能性组件

  • 像slider、swiper这种在很多个页面会用到就抽组件,这种叫功能性组件,一般放在components中
  • 像实现页面结构架构的,一般放在layouts的components里,叫页面组件

使用

html使用vue路由:

①首先把js引入

②html代码

vue路由_第2张图片

router-link:

代替了标签,href用to代替,这样写的好处是可以在不重新加载页面的情况下更改URL,处理URL的生成以及编码。

router-view:

是个根节点,挂载在根节点的组件,可以通过router-link进行跳转,但是只能跳转组件!!

所以说和router的区别之一就是,router只能组件跳转,这种行为叫组件切换,可以将目标组件覆盖到当前router-link的父级节点上,从而实现模拟页面跳转效果。默认模式下,vue-router不会缓存路由组件,即 当你从A跳转到组件B的时候,A会被卸载,会执行生命周期中的卸载方法,当有需要的时候,可以使用keep-alive 包裹你的路由组件,以实现 缓存页面的效果,使得,当你从A->B再到A的时候,A不会重新执行created生命周期,但是通常需要避免缓存过多的页面栈,避免内存溢出造成卡顿。

③:js代码

vue路由_第3张图片

 实现效果:

vue路由_第4张图片


vue项目里路由的使用:

安装 | Vue Router

npm install vue-router@4

②在src下新建router文件夹,并在此文件夹下新建index.js,官方的配置可能不容易看懂

这是router/index.js:

import{
    createRouter,
    createWebHashHistory
} from 'vue-router'
 
//import Index from '../src/pages/index.vue'
 
const routes =[{
    //在此配置
    path:"/",
    component:Index
 
}]
 
const router = createRouter({
    history:createWebHashHistory(),
    routes
})
 
export default router

③然后在main.js里引入

main.js里的配置要改一下

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

改为

import { createApp } from 'vue'
import App from './App.vue'
 
const app = createApp(App)
app.mount('#app')//写在最底部

 挂载上路由:

import router from './router'
app.use(router)

一般会把 放在App.vue里,渲染页面组件


守卫

vue的路由就是一个页面的组件跳转到另一个页面的组件用的,vue-router作为vue框架全局的路由管理(导航守卫),导航守卫里,重点是 登录状态、验证和权限验证

其中比较重要的api:beforeEach、afterEach

beforeEach:跳转前要执行的动作

比如,从A>B,进入B之前,我需要验证,该用户是否登录,或者说,当前用户的当前状态,是否有权进入B页面,这时候,就可以在beforeEach里进行判断,登录状态通常会结合vuex 或者其他状态管理模块来实现。

你可能感兴趣的:(其他,Vue,webview,vue.js)