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-link和router-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文件。