前端_vue

router

路由创建 router4 参考自小满router侵权删

import { createRouter , createWebHashHistory , RouteRecordRaw } from 'vue-router'

const routes : Array <RouteRecordRaw> = [
  {
    path : '/',
    component:()=>import('../components/login.vue')
  },
  {
    path : '/reg',
    component:()=>import('../components/reg.vue')
  },
];

const router = createRouter({
  history : createWebHashHistory(), //路由模式
  routes
})

//createRouter 传入一个配置项 , 配置路由
//RouteRecordRaw 路由配置

//createWebHashHistory hash值实现 地址栏后面有#
//通过location.hash 跳转
//通过window.addEventListener('hashChange) 监听路由跳转

//createWebHistory 没有#号
//通过 h5 history 实现
//history.pushState({state:1},'','/ccc') //跳转
//window.addEventListener('popstate') //监听

export default router

路由跳转方式

标签跳转

<router-link to="/reg" >reg</router-link>
<router-link :to="{name:'Login'}">Login</router-link>

编程式跳转

//1.字符串跳转
router.push('/reg')
//2.对象跳转
router.push({
   path: '/reg'
})
//3.命名式路由模式
router.push({
  name : 'reg',
})

历史记录

标签 replace

<router-link replace to="/reg" >reg</router-link>

编程跳转 replace

router.replace(url)

针对历史记录前进后退

router.go(1)
router.back(-1)l路由

路由传参

第一种 : 需要在路由配置

this.$router.push({ //传参
 path : `/chat/${session.id}`,
})
路由配置 
{
　　path : '/chat/:sessionId',
　　name : 'chat',
　　component : chat,
}
取参 : this.$route.params.sessionId

第二种 :

this.$router.push({
    name: 'index',
    params: {
    id: id
    }
})
取参 this.$route.params.id    第二种取参数的方式和第一种一样 params需要提供路由的name

params中是携带参数的,就相当于post一样，不会暴露出你传递的参数，name就是你路由配置中的对应路由的name (名字）

第三种 : 刷新地址栏值存在

this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
 })

取参 this.$route.query.id 第三种取参数的方式  query就想get一样会暴露在url地址 query提供的是路由地址 path

总结 :

第一种比较少用 , 二三比较常用 query 传参地址栏看得见 , params地址栏看不见
params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变

命名视图

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：

const routes: Array<RouteRecordRaw> = [
    {
        path: "/user",
        component: () => import('../components/footer.vue'),
        children: [
            {
                path: "",
                name: "Login",
                component: () => import('../components/login.vue')
            },
            {
                path: "reg",
                name: "Reg",
                component: () => import('../components/reg.vue')
            }
        ]
    },
 
]

如你所见，children 配置只是另一个路由数组，就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图

    <div>
        <router-view></router-view>
        <div>
            <router-link to="/">login</router-link>
            <router-link style="margin-left:10px;" to="/user/reg">reg</router-link>
        </div>
    </div>

重定向-别名

1. 字符串形式配置，访问/ 重定向到 /user （地址栏显示/,内容为/user路由的内容

        redirect:'/user1',
        children:[
            {
                path:'/user1',
                components:{
                    default:()=> import('../components/A.vue')
                }
            },
        ]

2.对象形式配置

        redirect: { path: '/user1' },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },

        ]

3.函数模式（可以传参）

        redirect: (to) => {
            return {
                path: '/user1',
                query: to.query
            }
        },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
      
        ]

别名 alias

将 / 别名为 /root，意味着当用户访问 /root时，URL 仍然是 /user，但会被匹配为用户正在访问 /

{
  path: '/',
  component: () => import('../components/root.vue'),
  alias:["/root","/root2","/root3"],
}

路由守卫

const whileList = ['/']; //白名单
router.beforeEach( (to,from , next)=>{ 
　　//拦截不在白名单的地址或没有token的会不允许 地址栏直接跳转
  if(whileList.includes(to.path) || localStorage.getItem('token')){
    next()
  }else{
    console.log('地址错误');
    next('/')
  }
  document.title = to.meta.title;
})

路由元信息

通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据，例如：

权限校验标识。
路由组件的过渡名称。
路由组件持久化缓存 (keep-alive) 的相关配置。
标题名称

我们可以在导航守卫或者是路由对象中访问路由的元信息数据。

    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta: {
        title: "登录"
      }
    },

使用TS扩展

如果不使用扩展将会是unknow 类型

declare module 'vue-router' {
  interface RouteMeta {
    title?: string
  }
}

过渡动效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API：

    <router-view #default="{route,Component}">
        <transition  :enter-active-class="`animate__animated ${route.meta.transition}`">
            <component :is="Component"></component>
        </transition>
    </router-view>

　　上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将元信息和动态的 name 结合在一起，放在<transition> 上：

declare module 'vue-router'{
     interface RouteMeta {
        title:string,
        transition:string,
     }
}
 
routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta:{
         title:"登录页面",
         transition:"animate__fadeInUp",
      }
    },

    }
  ]

动态路由

我们一般使用动态路由都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由)

主要使用的方法就是router.addRoute

添加路由
动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由

router.addRoute({ path: '/about', component: About })

查看现有路由

Vue Router 提供了两个功能来查看现有的路由：

router.hasRoute()：检查路由是否存在。
router.getRoutes()：获取一个包含所有路由记录的数组。

const initRouter = async () => {
    const result = await axios.get('http://localhost:9999/login', { params: formInline });
    result.data.route.forEach((v: any) => {
        router.addRoute({
            path: v.path,
            name: v.name,
                                    //这儿不能使用@
            component: () => import(`../views/${v.component}`)
        })
        router.push('/index')
    })
    console.log(router.getRoutes());
 
}

posted @ 2022-09-18 19:34 啊賢阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部

Axian

错的不是我, 错的是这段代码

前端_vue

路由创建 router4 参考自小满router侵权删

路由跳转方式

历史记录

路由传参

命名视图

重定向-别名

别名 alias

路由守卫

路由元信息

过渡动效

动态路由

查看现有路由

公告