一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

Vue Router 新手入门指南(1):路由怎么使用?

概念

我们要知道的是Vue是单页应用,整个项目只有一个html文件。在public目录下的index.html文件是整个项目中唯一的html文件。在vue中我们写的每一个页面其实都是一个html代码片段,通过特殊的手段实现每次只让一个代码片段生效,也就模拟成了多个html文件一样的效果。其实大概意思就是,比如说:

Vue Router 新手入门指南(1):路由怎么使用?

假设我们要实现三个页面home,detail和user的效果,那么我们把写好的它们三个的代码片段都放在一个html中,当我们要看到home页面的时候,我们就只让home的代码片段生效,另外的不生效,我们要去user页面的时候,就让user的代码片段生效其他的完全不显示。

那我们为什么要创建单页面应用,而不是多个页面就多个html文件来实现呢?举个例子:

Vue Router 新手入门指南(1):路由怎么使用?

掘金的每个页面都有这个导航栏头部,那这么多个页面,岂不是每个页面都要写一遍这个头部的代码,这样代码的复用性就会极低。

还有就是,如果是多页应用,你每去到一个新的页面,浏览器都要新开一个窗口,如果网络没那么好,每新到一个页面都要先空白一下才加载出来,其实这对用户的体验是非常不好的。而单页应用只有一个html,你去到其他页面不用新开窗口,当你看到一个页面的时候,其他页面的代码也是加载了的,只不过是不显示,那么你去到别的页面就不耗时,因为已经加载好了。

讲到这里,我们终于要进入正题了。我们说通过特殊的手段实现每次只让一个代码片段生效,这个特殊手段,就是今天的主角路由。

准备

首先我新建一个叫vue-router的vue项目,建好后就会生成这些文件:

Vue Router 新手入门指南(1):路由怎么使用?

然后右键vue-router打开它的终端,输入npm run serve命令将项目运行起来,Ctrl+单击 第一个地址:

Vue Router 新手入门指南(1):路由怎么使用?

我们就会在浏览器中看到src目录下的App.vue页面:

Vue Router 新手入门指南(1):路由怎么使用?

来到项目的最后一个文件vue.config.js中,把代码校验lintOnSave设为false,记得保存代码:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

把创建这个项目给我们生成的一些展示性代码删掉:components目录下的HelloWorld.vue可以删掉,App.vue里面的内容全部删除,然后vb+回车快捷键(需要安装Vue VSCode Snippets插件)生成以下代码:

Vue Router 新手入门指南(1):路由怎么使用?

然后将style里的scss改成基础的css,给div中加个类名nav,再输入首页 沸点 课程,保存后就能在浏览器上看到页面变成了这样:

<template>
  <div>
    首页
    沸点
    课程
  </div>
</template>

<script>
  export default {

  }
</script>

<style lang="css" scoped>

</style>

Vue Router 新手入门指南(1):路由怎么使用?

如何使用路由

现在我们需要点击首页就能去到首页页面,点击沸点就能去到沸点页面,点击课程就能去到课程页面。我们首先要先创建这三个页面,在src中新建一个文件夹views,然后在views中新建文件Home.vue、Class.vue、Hot.vue:

Vue Router 新手入门指南(1):路由怎么使用?

此时我们还没给它配路由,其实它们还不算是页面,只能说是组件。在Home.vue中输入以下代码,其他两个类似,使用快捷键vb+回车的话要记得将style中的scss改成css:

<template>
    <div>
        home page
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="css" scoped>

</style>

现在我们在终端中Ctrl+c将项目终止,输入npm install vue-router@4指令安装路由,安装好后我们就能在和src目录同级的node_modules文件夹下找到我们刚刚安装的vue-router了:

Vue Router 新手入门指南(1):路由怎么使用?

路由怎么用呢?

我们先在src目录下新建文件夹router,在router中新建文件index.js。我们要在里面使用路由,我们就要先引入路由import {createRouter} from 'vue-router',然后创建一个空数组routes,再定义一个router等于createRouter()的执行结果,router就是路由的实例对象,在createRouter()中放一个对象,里面有routes和history两个属性,history属性的值为createWebHistory(),此时我们还要从vue-router中引入createWebHistory。要让这个路由实例能被别的地方使用,我们还要抛出它export default router

import { createRouter,createWebHistory } from 'vue-router'

const routes = []

const router = createRouter({
    routes: routes,   // 右边的值routes为我们上面定义的数组routes
    history: createWebHistory()
})

export default router

抛出后要能被使用,还需要引入,我们来到与router同级的main.js文件下引入import router from './router/index.js',还要使用它.use(router),注意要放在mount之前:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

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

现在我们写的这个路由文件就能生效了,接下来我们来配置路由。

来到router下的index.js文件。我们要把什么定义成页面就把什么引入进来,我们需要把views文件夹中的Home.vue定义成页面,那么就引入import Home from '../views/Home.vue',接下来配置它的路由,在routes数组中添加一个对象,放一个path,路径为’/home’,再放一个component,值为Home,就是我们要引入进来的组件Home,其他两个页面类似:

import {createRouter,createWebHistory} from 'vue-router'
import Home from '../views/Home.vue'


const routes = [
    {
        path:'/home',
        component:Home,
    },
    {
        path:'/hot',
        component:()=>import('../views/Hot.vue') // 另一种写法,无需在顶部引入
    },
    {
        path:'/class',
        component:()=>import('../views/Class.vue')
    }
]

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

export default router

之后到App.vue文件中,添加一个路由路口<router-view></router-view>,所有配了路由的页面都会在该口子上展示:

Vue Router 新手入门指南(1):路由怎么使用?

我们在终端npm run serve将项目重新运行起来,在浏览器的地址栏手动加上我们之前给Home页面配置的路径’/home’,回车后就能看到页面变成了这样,Home页面的内容在路由路口的位置展示出来了:

Vue Router 新手入门指南(1):路由怎么使用?

我们再给首页加上<router-link></router-link>标签,在标签里加to="/home"属性,其他两个类似:

<template>
  <div>
    <router-link to="/home">首页</router-link>
    <router-link to="/hot">沸点</router-link>
    <router-link to="/class">课程</router-link>
  </div>
  <!-- 路由路口 -->
  <router-view></router-view>

</template>

这一步完成后,我们到浏览器页面上就会发现,点击哪个,就会出现对应页面的内容:

Vue Router 新手入门指南(1):路由怎么使用?

现在的页面有点简陋,我们稍微加一点点样式:

<template>
  <div class="nav">
    <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>

<script>
  export default {

  }
</script>

<style lang="css" scoped>

.nav{
  width: 800px;
  background-color: #bfecc6;
  margin: 0 auto;
  font-size: 30px;
  padding: 10px 20px;

}
a{
  text-decoration: none;
  margin-right: 30px;
}
.page{
  width: 1000px;
  margin: 0 auto;
  background-color: #eaf8f2;
  height: 1000px;
  font-size: 24px;
  padding: 30px;
}
</style>

现在是这个效果:

Vue Router 新手入门指南(1):路由怎么使用?

二级路由

如果我们想要像掘金首页那样,到首页后还有推荐和最新两个页面可以切换,就要用到二级路由了。

首先创建这两个页面,在views中创建一个homeChild文件夹,在文件夹中创建Suggest.vue和Newest.vue文件,在Suggest文件中写以下代码,添加了一个列表,另外一个文件类似,内容可以你们自己定义:

<template>
    <div>
        <ul>
            <li>html</li>
            <li>css</li>
            <li>js</li>
        </ul>
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="css" scoped>

</style>

再去给他们配二级路由,到路由的配置文件index.js里,在配置Home页面路由的对象中加一个children属性,值为数组,在数组中配置这两个页面的路由:

const routes = [
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'/home/suggest',
                component:()=>import('@/views/homeChild/Suggest.vue') // @表示src文件夹
            },
            {
                path:'newest',
                component:()=>import('@/views/homeChild/Newest.vue')
            }
        ]
    },
    {
        path:'/hot',
        component:()=>import('../views/Hot.vue')
    },
    {
        path:'/class',
        component:()=>import('../views/Class.vue')
    }
]

在Home.vue中添加路由入口和链接:

<template>
    <div class="home">
        <h2>这是首页</h2>
        <nav>
            <router-link to="/home/suggest">推荐</router-link>
            <router-link to="newest">最新</router-link>
        </nav>

        <router-view></router-view>


    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="css" scoped>
nav a{
    margin-left:20px;
}
</style>

那么现在到浏览器上点击推荐,页面就会变成这个样子了:

Vue Router 新手入门指南(1):路由怎么使用?

现在还有个小问题就是,如果我点去了沸点,然后点回首页,这个时候是需要能让我们看到推荐的内容的,但现在的效果我们是看不到的,必须得我们手动点击推荐,推荐页面的内容才会出来。同样的,我们需要浏览器上一打开就能出现首页的内容,而不是光秃秃的只有一个导航栏,点击首页才出现首页的内容。有什么办法能帮我们解决这个问题吗?有,那就是重定向。

重定向

我们在配置路由的index.js中,加上以下重定向的代码就好啦:

const routes = [
    {
      path:'/',
      redirect:'/home'  //重定向,默认到这个页面
    },
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'',
                redirect:'/home/suggest'//重定向 路径得写全
            },
            {
                path:'/home/suggest',
                component:()=>import('@/views/homeChild/Suggest.vue')
            },
            {
                path:'newest',
                component:()=>import('@/views/homeChild/Newest.vue')
            }
        ]
    },
    {
        path:'/hot',
        component:()=>import('../views/Hot.vue')
    },
    {
        path:'/class/:id',
        name:'class',
        component:()=>import('../views/Class.vue')
    }
]

现在就已经实现了我们想要的效果。

本文路由怎么使用的知识到这就讲完啦,欢迎下次再来一起学习ヾ(◍°∇°◍)ノ゙!!下篇将讲述路由跳转及如何携带参数。

原文链接:https://juejin.cn/post/7329776192260571177 作者:Guava205

(0)
上一篇 2024年1月31日 下午4:26
下一篇 2024年2月6日 下午4:00

相关推荐

发表评论

登录后才能评论