vue也有路由,它的路由怎么实现?

vue单页应用

Vue单页应用是一种使用特殊手段实现多个页面效果的开发模式。与传统的多页面应用不同,Vue单页应用只有一个HTML文件,但我们可以编写多个页面的代码片段。这种特殊手段通过每次只让一个代码片段生效,从而模拟多个HTML文件的效果。通过这种方式,我们可以更好地管理和组织项目结构,并提供更流畅的用户体验。当我们配置好了vue的运行环境后便可以使用npm run serve在文件集成终端启动。点击如下地址就可以看到html内容。

vue-router

Vue-router是Vue.js官方提供的路由管理器,它为Vue单页应用提供了强大的路由功能。通过Vue-router,我们可以在应用中实现页面之间的跳转和导航。Vue-router提供了一些特殊的手段,使得路由管理变得非常 简单和灵活。

router-link和router-view

其中,两个核心组件是router-linkrouter-view。router-link是一个Vue-router提供的路由链接组件,用于生成跳转链接。我们可以通过设置to属性来指定要跳转的路径,当用户点击该链接时,Vue-router会自动导航到对应的页面。而router-view则是用于显示当前路由对应的组件内容的容器。

html 复制代码
<template>
    <div class="nav">
        <!-- 就是a标签 -->
        <router-link to="/home">首页</router-link>  
        <router-link to="/hot">沸点</router-link>
        <router-link to="/class">课程</router-link>        
    </div>
<!-- 路由路口:所有配了路由的页面都会在该口上展示 -->
    <div class="page">
        <router-view></router-view> //容器
    </div>
</template>

二级路由

Vue的二级路由指的是在Vue单页应用中,对主路由进行嵌套,形成多层级的路由结构。这种结构可以帮助我们更好地组织和管理页面,并实现更复杂的导航逻辑。

在Vue中,我们可以通过Vue-router来定义和配置路由。对于二级路由,我们可以在主路由下再定义子路由,子路由可以有自己的路径和对应的组件。当用户访问子路由时,对应的组件将会被加载并显示在页面上。

例如,我们可以有一个主路由/home,然后在/home下再定义子路由/home/news/home/about,分别对应着新闻和关于页面。这样的结构就形成了二级路由,用户可以通过/home/news/home/about来访问不同的子页面。

vue 复制代码
 <router-link to="/home/suggest">推荐</router-link>
 <router-link to="/home/newest">最新</router-link>

通过合理使用二级路由,我们可以将页面模块化、提高代码的可维护性,并实现更灵活的页面导航和跳转逻辑。这对于构建复杂的单页应用非常有帮助。

this.$router.push()

除了基本的路由跳转,Vue-router还提供了一些其他的功能和特性。其中之一是编程式路由跳转。通过调用this.$router.push()方法,我们可以在代码中进行编程式地跳转。这样可以方便地实现条件跳转、动态跳转等需求。

另外,Vue-router还支持路由传参的功能。我们可以通过在路由配置中设置参数来进行路由传参。有两种常见的方式:使用query参数和使用params参数。query参数将参数以键值对的形式追加在URL中,而params参数则将参数作为路径的一部分。这种灵活的路由传参方式,可以满足不同场景下的需求。

看代码具体实现

js 复制代码
<script>
    export default {
        methods:{  //写入函数
            goClassPage(){
                //三种路由跳转方式
                // this.$router.push('/class')
                // this.$router.push({path:'/class',query:{id:123}})  //多个参数可以用这个
                this.$router.push({name:'class',params:{id:456}})//用name跳只能用params传参
            }
        }
    }
</script>

在使用Vue-router时,我们可以根据项目需求进行路由配置,定义各个路由对应的组件,并设置合适的路径和参数。通过合理的路由设计,我们可以构建出结构清晰、功能完善的单页应用。

用js引入vue文件

如下代码仅供参考,教你如何去写。

以下是如何在js文件夹引入vue文件的具体代码实现,首先我们在views文件夹下创建了Hot,Home,Class的vue文件夹,并在文件夹views下的homeChild文件夹内创建了二级路由:Suggest和Newest的vue文件。

js 复制代码
import {createRouter,createWebHistory} from 'vue-router' //引入路由
import Home from '../views/Home.vue'   //../是上一层文件夹

const routes = [
    {   //路由重定向方法,打开网站就自动跳转到home
        path:'/' ,
        redirect:'/home'
    },
    {   
        path:'/home',
        component:Home,
        children:[
            {//路由重定向  自动跳转到suggest推荐
                path:'',   
                redirect:'/home/suggest'
            },
            
            { //二级路由
                path:'/home/suggest',
                //引入文件
                component:()=>import('@/views/homeChild/Suggest.vue')//@代表src文件
            },
            
            {
                path:'/home/newest',   //二级路由加 / 就要加上他的上一级,也可以直接写newest
                component:()=>import('@/views/homeChild/Newest.vue')//@代表src文件
            }
        ]
    },
    
    {
        path:'/hot',
        component:()=>import('../views/Hot.vue')//引入hot文件
    },
    
    {   //使用路由跳转的参数要写在path里面
        path:'/class/:id',  //用name传参就要说明这里可以传参,传两个参得在后面接/:name
        name:'class',
        component:()=>import('../views/Class.vue')//引入class文件
    }
]

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

export default router

在Vue框架中,路由是用来管理不同页面间导航和状态的机制。history选项是Vue Router中用于指定路由模式的一部分,它决定了如何管理应用程序的历史记录和URL。

createWebHistory()是Vue Router提供的一个工厂函数,用于创建基于浏览器 history API 的路由模式。这个函数会返回一个history对象,允许你在Vue应用中使用类似传统网页的URL路径。

相关推荐
江城开朗的豌豆9 分钟前
前端性能救星!用 requestAnimationFrame 丝滑渲染海量数据
前端·javascript·面试
江城开朗的豌豆9 分钟前
src和href:这对'双胞胎'属性,你用对了吗?
前端·javascript·面试
江城开朗的豌豆16 分钟前
forEach遇上await:你的异步代码真的在按顺序执行吗?
前端·javascript·面试
万少24 分钟前
HarmonyOS Next 弹窗系列教程(3)
前端·harmonyos·客户端
七灵微1 小时前
【后端】单点登录
服务器·前端
持久的棒棒君5 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
渔舟唱晚@7 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
crary,记忆7 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz8 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou08 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web