Vue3的vue-router超详细使用

搭建vue3环境

我们使用vite来搭建vue3环境(没有安装vite需要去安装vite)

npm create vite routerStudy

在命令行选择
在这里插入图片描述
请添加图片描述

cd routerStudy
npm i
npm run dev

环境搭建成功!!
在这里插入图片描述

vue-router入门(宝宝模式)

  1. 下载vue-router
npm i vue-router@4
  1. 新建以下文件
    src/components/File1.vue
<template>
    <div>
        这是文件一
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

src/components/File2.vue

<template>
    <div>
        这是文件二
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

在src下新建router文件夹
在router文件夹下新建router.ts:

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'

const routes = [
    {
        path: '/',
        component:File1
    },
    {
        path: '/file2',
        component:File2
    }
]

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

export default router;

  1. 修改src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/router'

createApp(App).use(router).mount('#app')

  1. 修改src/components/HelloWorld.vue:
<script setup lang="ts">

</script>

<template>
    <router-view/>
    <button><router-link to="/">去文件一</router-link></button>
    <button><router-link to="/file2">去文件二</router-link></button> 
</template>

<style scoped>
</style>

  1. 点击按钮能够切换成功则使用成功请添加图片描述

vue-router基础(青年模式)

一。动态路由匹配

1.带参数的动态路由匹配

当我们需要对每个用户加载同一个组件,但用户id不同。我们就需要在vue-router种使用一个动态字段来实现,再通过$routr.params来获取值:
请添加图片描述

我们用具体实例来实现一下:

(1)修改src/router/router.ts:

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'

const routes = [
    {
        path: '/',
        component:File1
    },
    {
        path: '/file2/:username/abc/:userid', //注意看这个
        component:File2
    }
]

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

export default router;

(2)修改组件HelloWorld.vue:
请添加图片描述
(3) 修改组件File2.vue:

<template>
    <div>
        这是文件二
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this
    
onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

(4)点击去文件二按钮
请添加图片描述
(5)查看控制台
请添加图片描述

2.捕获所有路由或404 Not Found路由

当用户在导航栏乱输一通后,路由表中没有对应的路由,这时候,就需要将用户转去404页面。那么
我们该如何处理呢?

(1)修改router/router.ts:

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
import NotFound from '../components/NotFound.vue'
import UserGeneric from '../components/UserGeneric.vue'


const routes = [
    {
        path: '/',
        component:File1
    },
    {
        path: '/file2/:username/abc/:userid',
        component:File2
    },
    // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
    {
        path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound
    },
    // 将匹配以 `/user-` 开头的所有内容,并将其放在 `$route.params.afterUser` 下
    {
        path: '/user-:afterUser(.*)', component: UserGeneric
    },
]

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

export default router;

(2)新建组件NotFound.vue:

<template>
    <div>
        糟糕!页面没有找到。。。呜呜呜
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this
    
onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

(3)修改HelloWorld.vue
在这里插入图片描述
(4)点击去404页面按钮(或者在地址栏乱写一通)
在这里插入图片描述
在这里插入图片描述
(5)出现404页面,说明运行成功!!!

二。嵌套路由

路由是可以嵌套的。例如:
在这里插入图片描述
嵌套的理解挺简单的,我就不多叭叭了,直接上代码,看完就懂了。
(1)新建组件Children1.vue:

<template>
    <div>
        我是孩子1
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

(2)新建组件Children2.vue:

<template>
    <div>
        我是孩子2
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

(3)修改router/router.ts:

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
import NotFound from '../components/NotFound.vue'
import UserGeneric from '../components/UserGeneric.vue'
import Children1 from '../components/Children1.vue'
import Children2 from '../components/Children2.vue'



const routes = [
    {
        path: '/',
        component: File1,
        
    },
    {
        path: '/file2',
        component: File2,
        children: [  //使用嵌套路由
            {
                path: 'children1',
                component:Children1
            },
            {
                path: 'children2',
                component:Children2
            },
        ]
    },
    {
        path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound
    },
    {
        path: '/user-:afterUser(.*)', component: UserGeneric
    },
]

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

export default router;

(4)修改组件HelloWorld.vue:
在这里插入图片描述
(5)修改组件File2.vue:

<template>
    <div>
        这是文件二
        <div>
            我是文件二里的内容
            <router-view/>
            <button><router-link to="/file2/children1">找孩子1</router-link></button>
            <button><router-link to="/file2/children2">找孩子2</router-link></button>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

(6)先点去文件二,再点击找孩子1按钮,出现即成功!!
请添加图片描述

三。编程式导航

除了使用/< router-link/> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

1.router.push()方法的使用

(1)修改组件NotFound.vue:

<template>
    <div>
        糟糕!页面没有找到。。。呜呜呜
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this


    // 1.字符串路径
    _this.$router.push('/file2/children2')

    // 2.带有路径的对象
    // _this.$router.push({path:'/file2/children2'})

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

    // 4.带查询参数,结果是 /register?plan=private
    // _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })


    onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

(2)再点“去404页面”,发现没有去404页面了,说明编程式导航成功!!
在这里插入图片描述

2.router.replace()方法的使用

它的作用类似于 router.push,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。

修改组件NotFound.vue:

<template>
    <div>
        糟糕!页面没有找到。。。呜呜呜
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this

    // 一。router.push的使用: 
    // 1.字符串路径
    // _this.$router.push('/file2/children2')

    // 2.带有路径的对象
    // _this.$router.push({path:'/file2/children2'})

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

    // 4.带查询参数,结果是 /register?plan=private
    // _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })

    // 二。router.replace的使用:
    _this.$router.replace('/file2/children1')


    onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

3.router.go()方法的使用

修改组件NotFound.vue:

<template>
    <div>
        糟糕!页面没有找到。。。呜呜呜
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3获取当前this

    // 一。router.push的使用: 
    // 1.字符串路径
    // _this.$router.push('/file2/children2')

    // 2.带有路径的对象
    // _this.$router.push({path:'/file2/children2'})

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

    // 4.带查询参数,结果是 /register?plan=private
    // _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })

    // 二。router.replace的使用:
    // _this.$router.replace('/file2/children1')

    // 三。router.go的使用:
    _this.$router.go(-1)  //相当于点击回退一次

    onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>
  • 18
    点赞
  • 102
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
Vue 3中,使用Vue Router进行路由拆分可以帮助你更好地组织和管理你的路由配置。以下是一些步骤来实现路由拆分: 1. 安装Vue Router:首先,确保你的项目中已经安装了Vue Router。可以通过以下命令进行安装: ``` npm install vue-router@next ``` 2. 创建路由模块:创建一个新的模块来定义和配置你的路由。可以创建一个名为`router.js`的文件,并在其中导入VueVue Router: ```javascript import { createRouter, createWebHistory } from 'vue-router'; const routes = [ // 定义你的路由配置 ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 3. 定义路由配置:在路由模块中,通过`routes`数组来定义你的路由配置。每个路由对象应该包含一个`path`属性和一个`component`属性,分别指定路由的路径和对应的组件。 ```javascript import Home from './components/Home.vue'; import About from './components/About.vue'; const routes = [ { path: '/', component: Home, }, { path: '/about', component: About, }, // 更多路由配置... ]; ``` 4. 在主应用程序中使用路由:在你的主应用程序中,导入并使用创建的路由实例。你可以在`main.js`文件中完成这个步骤: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); ``` 现在,你已经成功拆分了你的路由配置。你可以在每个组件中使用`<router-link>`和`<router-view>`来进行导航和渲染路由组件。 注意:以上只是一个简单的示例,你可以根据你的项目需求进行更复杂的路由配置和组织方式。不过,以上步骤应该可以帮助你开始使用Vue Router进行路由拆分。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白阿槟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值