首页 > 其他分享 >Vue-Router

Vue-Router

时间：2022-11-07 17:02:52浏览次数：74  
标签：username Vue component router Router path id 路由

Vue-Router

目录

1. 路由的安装与基本使用

安装

npm run vuee-router@4 -save

基本使用案例

demo10文件

<template>
    <div>
        <h3>demo1界面</h3>
    </div>
</template>
<script>
export default {
    
}
</script>

demo11文件

<template>
    <div>
        <h3>demo2界面</h3>
    </div>
</template>
<script>
export default {
    
}
</script>

main.js文件

import { createRouter, createWebHistory } from 'vue-router'
import { createApp, defineAsyncComponent } from 'vue'
import DemoRouter11 from './components/DemoRouter11.vue'
import DemoRouter10 from './components/DemoRouter10.vue'

const app = createApp(App);
//路由 vue-router
const routes = [
    { path: '/demo1', component: DemoRouter10 },
    { path: '/demo2', component: DemoRouter11 }
]
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

app.use(router);
app.mount("#app");

效果图如下：

2. 带参的动态路由

2.1 路由参数的匹配

创建一个user.vue文件，如下：

<template>
    <div>
        <h3>User界面</h3>
        <h4>username: {{$route.params.username}}</h4>
        <h4>id: {{$route.params.id}}</h4>
    </div>
</template>

export default {
    mounted() {
        //挂载时加载 弹窗只会加载一次 路由发生变化时不会再弹出显示
        alert(`组件加载，请求数据。参数username为${this.route.params.username}，id为${this.route.params.id}`);
    },
    //路由守卫，当路由更新发生变化时，弹出信息
    beforeRouteUpdate (to, from) {
        // ...
        console.log(to,from);
        alert(`组件加载，请求数据。参数username为${to.params.username}，id为${to.params.username}`);
    }
}

main.js 中 添加路由

//路由 vue-router
const routes = [
    { path: '/demo1', component: DemoRouter10 },
    { path: '/demo2', component: DemoRouter11 },
    //新增的路由 动态参数匹配
    { path: '/user/:username/:id', component: DemoRouterUser }
]
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

app.use(router);
app.mount("#app");

app代码

<template>   
    <div>
         <h2>带参路由的使用</h2>
         <router-link to='/user/小王/8888'>小王</router-link>
         <router-link to='/user/小李/1111'>小李</router-link>
    </div>
    <div>
   <router-view></router-view>
   </div>
</template>

效果图如下

2.2 路由匹配的语法规则

详见：https://router.vuejs.org/zh/guide/essentials/route-matching-syntax.html#可重复的参数

const routes = [
    { path: '/demo1', component: DemoRouter10 },
    { path: '/demo2', component: DemoRouter11 },
    { path: '/user/:username/:id', component: DemoRouterUser },
    // ? 代表参数可以为空 （为空时也会进入界面）
    { path: '/user/:username?', component: childUser },
    //+表示匹配一个或多个  *表示匹配0个或多个
    { path: "/user/:id(\\d+)", component: UserSetting },
    { path: '/user/name/:username', component: childUser },
    { path: "/user/id/:id", component: UserSetting}
 ]

2.3 路由的嵌套

UserCenter

<template>
    <div>
        <h2>用户中心</h2>
        <h3>姓名：{{$route.params.username}}</h3>
        <router-view></router-view>
    </div>
</template>

Friends

<template>
    <div>
        <h2>好友列表</h2>
        <h3>好友人数：{{$route.params.count}}</h3>
    </div>
</template>

//路由 vue-router
const routes = [
    {
        path: '/usercenter/:username',
        component: DemoRouterUserCenter,
        children: [{
            path: "friends/:count",
            component: DemoRouterFriends
        }]
    }
]

效果图

3.页面导航

3.1 使用路由方法

App.vue

   <div>
        <h2>页面导航</h2>
        <button @click="toUserCenter()">点击我进入用户中心</button>
        <button @click="toPrePage()">跳转到前一个记录</button>
    </div>
、   <router-view></router-view>

main.js usercenter路由配置

 {
        path: '/usercenter/:username',
        name: 'usercenter',
        component: DemoRouterUserCenter,
        children: [{
            path: "friends/:count",
            component: DemoRouterFriends
        }]
  }

Script methods中的方法实现

  toUserCenter(){
      //写法一
      this.$router.push('/usercenter/踩踩');

      //写法二
      this.$router.push({
        path:'/usercenter/踩踩'
      })

      //写法三 给对应router先命名
      this.$router.push({
        name:"usercenter",
        params:{
           username:"金宝"
        }
      })

      //写法四： 路由导航带参数查询
      this.$router.push({
        path:'/usercenter/龙秋林',
        query:{
          username:"xixi"
        }
      })

      // 写法五：处理路由跳转成功后的逻辑
      this.$router.push({
        path:'/usercenter/踩踩'
      }).then(()=>{
        alert('跳转成功');
      })
   }

3.2 导航历史控制

replace 的运用：会直接替换原来的页面，即跳转前的界面从导航栈中删除

 toUserCenter(){
     //写法六：历史导航控制
     //会直接替换原来的页面，即跳转前的界面从导航栈中删除
       //way1
       this.$router.replace({
         path:"/usercenter/妮妮"
       })
      //way2
       this.$router.push({
         path:"/usercenter/妮妮",
         replace:true
       });
   }

go 的运用：跳转到导航栈的某个位置

 toPrePage(){
      //跳转到导航栈的某个位置
      //跳转到后一个记录
      // this.$router.go(1);
      //跳转到后三个记录
      // this.$router.go(3);
      //跳转到前一个记录
      this.$router.go(-1);
 }
4. 关于路由的命名

4.1 使用名称进行路由切换

      this.$router.push({
        name:"usercenter",
        params:{
           username:"金宝"
        }
      })

  <router-link :to="{name:'usercenter',params:{username:'悠悠'}}">routerlink1 toUserCenter</router-link>

4.2 路由视图命名

 {
        path: '/user/:username/:id',
        components: {
            topBar: DemoRouterUser,
            main: UserSetting,
            default: UserSetting
        }
  }

       <h2 style="color:green;">default  routerView</h2>
       <router-view></router-view>
       <h2  style="color:green;">name topBar routerView</h2>
       <router-view name='topBar'></router-view>

4.3 使用别名

设置单个别名

   { path: "/user/id/:id", component: UserSetting, alias: "/useAlias/id/:id" },

设置多个别名

    // alias 配置别名  也可以配置多个别名
    { path: '/user/name/:username', component: childUser, alias: ['/c/c/:username', '/a/a/:username'] },

设置别名后可以通过别名访问 也可以通过原来的path来访问

4.4 路由重定向

静态方法配置

 // 重定向 1.方法一：通过path ；2.方法二：通过路由的name值
    {
        path: '/demo1',
        component: DemoRouter10,
        redirect: { name: 'demo2' }
    }

    { path: '/demo1', component: DemoRouter10, redirect: "/demo2" },

动态方法配置 (使用函数)

 // 动态的方式配置重定向
    {
        path: '/demo1',
        component: DemoRouter10,
        redirect: to => {
            // to 是路由对象
            console.log(to);
            // 随机数模拟登录状态
            let login = Math.random() > 0.5;
            console.log(login);
            if (login) {
                return { path: '/demo1' };
            } else {
                return { path: '/demo2' }
            }
        }
    },
5.关于路由传参

5.1 基本使用方法 设置路由的props值为true

 //1.设置props为true
 { path: "/user/:id(\\d+)", component: UserSetting, props: true },

props 接收

<template>
     <div>
        <h2>UserSetting Page</h2>
        <h3>{{$route.params.id}}</h3>
        <h3 style="color:red">{{this.id}}</h3>
     </div>
</template>

<script>
export default {
   //设置路由的props为true后 接收路由参数的值
   props:[
      'id'
   ]
}
</script>

5.2 多个页面出口时 router props 配置

 {
        path: '/user/:username/:id',
        components: {
            topBar: DemoRouterUser,
            main: UserSetting,
            default: UserSetting
        },
        props: {
            topBar: true,
            main: true
        }
  }

5.3 传固定参值

 //2.传固定值 直接写对象即可
 { path: "/user/:id(\\d+)", component: UserSetting, props: { id: '111D' } },

5.4 动态传值（使用函数）

//3.动态传值 //! props和redirect 使用函数都无效 没起作用 记得百度具体的方法  
    {
        path: "/user/:id(\\d+)",
        component: UserSetting,
        props: route => {
            return {
                id: route.params.id,
                other: 'other'
            }
        }
    }
6. 路由导航守卫

6.1 全局的导航守卫

前置守卫 beforeEach 返回false表示禁止此次跳转 返回true表示允许本次跳转

const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

//路由导航守卫
//全局守卫 前置导航守卫
router.beforeEach((to, from) => {
    //要跳转的路由对象
    console.log(to);
    //当前将要离开的路由对象
    console.log(from);
    // if (to.name == "setting") {
    //     return { name: 'setting', params: { id: '000' } };
    // }
    return true; // 返回false表示禁止此次跳转 返回true表示允许本次跳转
});

后置守卫 afterEach 对页面的分析以及监听起作用

router.afterEach((to, from, failture) => {
    console.log('跳转成功');
    console.log(to);
    console.log(from);
    console.log(failture);
});

6.2 为特定的路由注册导航守卫 （局部守卫）

配置方法一

 {
        path: '/user/:username/:id',
        components: {
            topBar: DemoRouterUser,
            main: UserSetting,
            default: UserSetting
        },
        props: {
            topBar: true,
            main: true
        },
        beforeEnter: router => {
            // ...
             console.log('beforeEnter');
            console.log(router);
            return true;
         }
  }

配置方法二 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

<template>
    <div>
        <h3>demo2界面</h3>
        <router-link to="/demo2/wuming1/">go usercenter</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
   beforeRouteEnter (to, from, next) {
    // ...
      console.log(to,from,'前置守卫');    
      next((w)=>{
        console.log(w);//w为当前组件的实例
      })
      return true;
   },
   beforeRouteUpdate(to,from){
      console.log(to,from,'路由参数有更新时的守卫');    
   },
   beforeRouteLeave (to, from, next) {
    // ...
      console.log(to,from,'离开页面');    
   }
}
</script>
7.动态路由

7.1 动态路由添加与删除

添加 this.$router.addRoute({路由对象 })

删除 1. 使用addRoute路由返回的删除路由进行调用

​ 2. 通过名字来删除 this.$router.removeRoute('routerName')

<template>
    <div>
         <h3 style="color:green">示例界面1</h3>
         <button @click="goPage13()">点击我</button>
    </div>
</template>

<script>
import demo13 from '../components/DemoRouter13.vue'
export default {
    created() {
        // 直接在浏览器中方位demo13是会报错的 跳转不到demo13这个界面 因为此时的路由还没有注册 
        let call=this.$router.addRoute({
            path:'/demo13',
            component:demo13,
            name:"demo13"
        });//会返回一个删除回调
         //直接移除此路由
        //!  call();
        //动态添加路由时如果添加重名的路由 旧的路由会被删除掉
        // 通过路由名称来删除路由
        //! this.$router.removeRoute('demo13');
        // hasRoute()方法用于检查当前已经注册的路由中是否包含某个路由
         console.log(this.$router.hasRoute('demo13'),'是否存在demo13');
        // getRoutes()方法用来获取包含所有路由的列表
        console.log(this.$router.getRoutes(),'所有路由列表');
    },
    methods: {
        goPage13(){
          this.$router.push('/demo13');   
        }
    },
}
</script>

hasRoute() 方法：用于检查当前已经注册的路由中是否包含某个路由

getRoutes() 方法：用来获取包含所有路由的列表

更详细的路由知识点见vue3官网 ：

https://router.vuejs.org/zh/

标签：username,Vue,component,router,Router,path,id,路由
From： https://www.cnblogs.com/caiiac/p/16866539.html

相关文章

  • Vue中做table分页
    <template> <divclass="wrap">  <!--<el-card>-->   <el-table:data="tableData"borderstripestyle="width:100%">    <el-table-column......
  • vue-计算属性和监视属性的区别和使用方法
    转载于：https://blog.csdn.net/qq_38110274/article/details/121242203 作者：我是天之涯  一、总述computed和watch都是vue框架中的用于监听数据变化的属性。 二......
  • vuecli的项目结构
    src中为我们需要编写的资源assets中为公共资源如图片多媒体文件等components中为我们编写的子组件app为子组件入口mainjs为总入口文件......
  • vue中改变数组对象属性名
    data:{年:2022,数量:'8000'},//把data下的年改为年份，数量改为数据量data:{年份:2022,数据量:'8000'},思路：1.遍历Json数组；2.将数组每一......
  • 手写vue-router核心原理
    最近也在观察vue3新特性，抽空玩一玩嵌套路由的vue-router，直接上代码项目目录结构代码展示app.vue<template><divid="app"><div><router-linkto="/"......
  • vue3 vite代理配置，解决跨域问题
    vite.config.ts根目录文件配置exportdefaultdefineConfig({plugins:[vue()],server:{port:3000,open:true,//自动打开base:"./",//生......
  • vue表格滚动vue-seamless-scroll
    引入  npminstallvue-seamless-scroll--save  在找到main.js引入importscrollfrom'vue-seamless-scroll'Vue.use(scroll)主要代码<template>......
  • Vue3, setup语法糖、Composition API全方位解读
    起初Vue3.0暴露变量必须return出来，template中才能使用；Vue3.2中只需要在script标签上加上setup属性，组件在编译的过程中代码运行的上下文是在setup()函数中，无......
  • Vue3知识点之数据侦测
    Vue的核心之一就是响应式系统，通过侦测数据的变化，来驱动更新视图。实现可响应对象的方式通过可响应对象，实现对数据的侦测，从而告知外界数据变化。实现可响应对象的方式：g......
  • Vue3必会技巧-自定义Hooks
    Vue3自定义Hooks定义：个人理解：一些可复用的方法像钩子一样挂着，可以随时被引入和调用以实现高内聚低耦合的目标，应该都能算是hook；为什么Vue3要用自定义Hook？：结论：就是为了......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99