VUE笔记(六)vue路由

这篇具有很好参考价值的文章主要介绍了VUE笔记(六)vue路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、路由的简介

1、实现生活中的路由

VUE笔记(六)vue路由,vue.js,笔记,前端

路由:路由其实就是一个key-value对应关系

路由器:用于管理多个路由关系的设备被称为路由器

2、前端的路由

目前使用的前端项目都是单页面的应用(SPA),一个项目中只有一个html页面,这种项目是由很多个组件组成,组件之间如果要跳转要依靠路由来完成,路由是由key和value组成一个对应关系,前端路由的key就是url地址,路由的value就是组件本身

key value
http://localhost:8080/login Login.vue
http://localhost:8080/register Register.vue

总之:路由是实现多个组件之间进行跳转一种方式,使用路由将各组件之间联系起来

由于vue是一个渐进式的前端框架,vue的核心语法中不包括路由,路由以插件的形式存在,如果要去使用路由就要去将路由集成到vue项目中

二、路由的基本配置

1、路由的配置

由于路由不是vue的核心功能,大家如果要使用就需要去单独集成它,在vue中使用路由最多一个路由产品vue-router

vue-router的官网:Vue Router

注意:vue2的项目,匹配的路由版本是vue-router@3

配置的具体步骤如下

  • 安装vue-router的依赖包

npm install vue-router@3.5.1
  • 在src目录创建router的文件夹,在router文件夹下创建index.js文件,具体代码如下

//导入Vue包
import Vue from 'vue'
//导入VueRouter包
import VueRouter from 'vue-router'
//将VueRouter作为插件设置到Vue中
Vue.use(VueRouter)
//创建路由器对象
const router=new VueRouter()
//将这个路由器对象导出
export default router
  • 将路由挂载到vue实例上,在main.js文件中

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
Vue.config.productionTip = false
​
new Vue({
  render: h => h(App),
  router
}).$mount('#app')
​
2、一级路由的配置

路由是一个key-value的对应关系

  • 创建组件

    在src/views目录下分别创建Login.vue、Register.vue、Home.vue

  • 路由配置

    在src/router/index.js进行如下配置

//导入Vue包
import Vue from 'vue'
//导入VueRouter包
import VueRouter from 'vue-router'
//导入组件
import Login from '@/views/Login'
import Register from '@/views/Register'
import Home from '@/views/Home'
//将VueRouter作为插件设置到Vue中
Vue.use(VueRouter)
//创建routes数组
const routes=[
    {
        path:'/login',
        component:Login
    },
    {
        path:'/register',
        component:Register
    },
    {
        path:'/home',
        component:Home
    }
]
/*
  创建路由器对象
  const router=new VueRouter(config)
  config:路由的配置对象
  routes:路由配置的数组
*/
const router=new VueRouter({
    routes
})
//将这个路由器对象导出
export default router
3、路由的出口设置

如上已经将路由的规则配置成功了,如果要显示在页面上,就需要配置路由出口

在App.vue根组件中配置路由出口

<template>
    <router-view></router-view>
</template>
4、路由的跳转

使用vue-router进行路由跳转有两种方式

  • 标签式跳转方式:使用<router-link>这个标签进行跳转,一般使用在<template></template>模板之中,最终会编译成<a>标签

  • 编程式跳转方式:使用this.$router对象的push或者replace方法进行跳转的,这种跳转方式一般使用在组件的js代码部分

4.1、标签式路由跳转的案例
已有账号?<router-link to="/login">前往登录</router-link>
4.2、编程式路由跳转
  • 下载axios

npm i axios
  • 配置package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:production": "set NODE_ENV=production&vue-cli-service serve",
    "build": "vue-cli-service build"
 }
  • 封装auth.js方法,完成token获取和设置的封装

    位置:src/utils/auth.js

const tokenkey="admin-token"
// 保存token到localStorage中的方法
export const setToken=tokenval=>localStorage.setItem(tokenkey,tokenval)
// 从localStorage中获取token
export const getToken=()=>localStorage.getToken(tokenkey)
  • 封装axios

位置:src/api/request.js

import axios from 'axios'
import {getToken} from '@/utils/auth'

/* 
    基础路由的配置
*/
switch(process.env.NODE_ENV){
    case 'production':
        axios.defaults.baseURL="http://47.98.128.191:3000/"
        break;
    default:
        axios.defaults.baseURL="http://www.zhaijizhe.cn:3005"
        break
}
/* 
    设置请求拦截器
*/
axios.interceptors.request.use(config=>{
    //获取token的信息,然后将token信息携带到请求头信息中
    if(getToken){
        config.headers.Authorization=getToken()
    }
    return config
})
/* 
   设置响应拦截器
*/
axios.interceptors.response.use(response=>{
    return response.data
},err=>{
    if(err.response){
        switch(err.response.status){
            case 401:
                break
            case 404:
                break
            case 500:
                break
        }
    }
})

export default axios
  • 编写登录api方法

位置:src/api/modules/users.js

import request from '@/api/request'
export default{
    login:(data)=>request.post('/users/login',data)
}
  • 汇总模块

位置:src/api/api.js

import users from "./modules/users";
export default{
    users
}
  • 挂载api到Vue原型上

位置:src/main.js

import api from '@/api/api'
Vue.prototype.$api=api
  • 组件中完成登录

位置:src/views/Login.vue

<template>
    <div>
        <h1>登录</h1>
        <div>
            没有账号?<router-link to="/register">前往注册</router-link>
        </div>
        <div>
            <div>
                <label for="username">姓名:</label>
                <input id="username" type="text" placeholder="请输入登录账户" v-model="user.username">
            </div>
             <div>
                <label for="password">密码:</label>
                <input id="password" type="text" placeholder="请输入登录账户" v-model="user.password">
            </div>
            <div>
                <button @click="login">登录</button>
            </div>
        </div>
    </div>
</template>

<script>
import {setToken} from '@/utils/auth'
export default {
    data(){
        return{
            user:{
                username:'admin',
                password:'123'
            }
        }
    },
    methods:{
        async login(){
           let {code,message,token}=await this.$api.users.login(this.user)
           /* 
             登录成功后,要完成的事项有两个
             1、保存token到localStorage中
             2、使用路由进行跳转
           */
          setToken(token)
          if(code){
            alert(message)
            //跳转到后台,使用编程式路由跳转
            this.$router.replace('/home')
          }
        }
    }
}
</script>

<style>

</style>
5、路由的嵌套
  • 如果要配置二级路由,需要在相应的一级路由对象上添加children属性,然后进行配置

位置:src/router/index.js

{
        path:'/home',
        component:Home,
        children:[
            {
               path:'workplace',//二级路由的path的前不要带/
               component:workplace
            },
            {
                path:'analysis',
                component:analysis
            },
            {
                path:'studentList',
                component:studentList
            }
        ]
    }
  • 静态菜单

位置:src/views/Home.vue

<template>
    <div class="container">
       <div class="header">
            <div class="logo">学苑BOSS系统</div>
       </div>
       <div class="main">
            <div class="silder">
                <ul>
                    <li>
                        <span>控制面板</span>
                        <ul class="sul">
                            <li>
                                <router-link to="/home/workplace">工作台</router-link>
                            </li>
                            <li>
                                <router-link to="/home/analysis">统计报表</router-link>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>学员管理</span>
                        <ul class="sul">
                            <li>
                                <router-link to="/home/studentList">学生列表</router-link>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>系统管理</span>
                        <ul class="sul">
                            <li>班主任管理</li>
                            <li>教师管理</li>
                            <li>专业管理</li>
                            <li>班级管理</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="content">
                <!-- 设置二级路由的出口 -->
                <router-view></router-view>
            </div>
       </div>
    </div>
</template>

<script>
export default {

}
</script>

三、路由的其他配置

1、路由的重定向

所谓的路由重定向就是指当你输入一个路由的路径时候,它会自动重新跳转到另外一个路由上这种行为称为路由重定向

 {
        path:'/',
        redirect:'/home'
 },
2、路由懒加载

为了提高首屏加载速度,可以采用路由懒加载的方式,提升加载性能,避免白屏现象出现

//导入Vue包
import Vue from 'vue'
//导入VueRouter包
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//创建routes数组
const routes=[
    {
        path:'/login',
        component:()=>import('@/views/Login')
    },
    {
        path:'/register',
        component:()=>import('@/views/Register')
    },
    {
        path:'/',
        redirect:'/home'
    },
    {
        path:'/home',
        component:()=>import('@/views/Home'),
        children:[
            {
               path:'workplace',//二级路由的path的前不要带/
               component:()=>import('@/views/dashboard/workplace.vue')
            },
            {
                path:'analysis',
                component:()=>import('@/views/dashboard/analysis.vue')
            },
            {
                path:'studentList',
                component:()=>import('@/views/students/studentList.vue')
            }
        ]
    }
]
const router=new VueRouter({
    routes
})
//将这个路由器对象导出
export default router
3、缓存路由
  • 为需要设计缓存组件取一个名称

export default {
    name:'analysis'
}
  • 在路由的出口的地方设置keep-alive

 <keep-alive exclude="analysis">
         <router-view></router-view>
 </keep-alive>
  • exclude:该组件不被缓存

  • include:该组件会被缓存

4、路由的元信息

路由对象有很多属性,核心有两个,一个就是path,表示的路由的路径,component表示的是路由的对应的组件,除此之外还有其他的属性,比如meta属性,可以设置路由的额外信息,这里以两个例子给大家讲解

4.1、面包屑的功能
  • 需要在路由定义的时候在相应的路由配置对象中添加meta属性,配置面包屑的具体配置

{
       path:'workplace',//二级路由的path的前不要带/
       component:()=>import('@/views/dashboard/workplace.vue'),
       meta:{
          firstTitle:'控制面板',
          secondTitle:'工作台'
      }
},
  • 自定义面包屑组件

在src/components目录下创建BreadCrumb组件

<template>
    <div>
        <span>{{$route.meta.firstTitle}}</span>&gt;<span>{{$route.meta.secondTitle}}</span>
    </div>
</template>
  • 在需要的组件中引入面包屑组件

<template>
    <div>
        <bread-crumb></bread-crumb>
        <h1>学生列表</h1>
    </div>
</template>
4.2、路由缓存状态设置
  • 在路由配置中为meta属性设置isKeepAlive属性

{
        path:'workplace',//二级路由的path的前不要带/
        component:()=>import('@/views/dashboard/workplace.vue'),
        meta:{
            firstTitle:'控制面板',
            secondTitle:'工作台',
            iskeepAlive:true
      }
 },
  • 在路由出口的地方通过v-if指令来完成设置

 <keep-alive>
    <router-view v-if="$route.meta.iskeepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.iskeepAlive"></router-view>

说明:这种设置方式较之前使用include或者exclude方式的更加合理。

四、路由传参

1、学生列表
  • 编写获取学生的api方法

import request from '@/api/request'
export default{
    getStudents:params=>request.get('/students/getStudents',{params})
}
  • 汇总api

import users from "./modules/users";
import students from "./modules/students";
export default{
    users,students
}
2、query传参

vue-router这个路由操作中,要进行传参有多种方式,比较常用的方式有两种

  • query传参方式

  • params传参方式

query传参的步骤

第1步:创建页面组件,配置路由

 {
        path:'studentDetail',
        component:()=>import('@/views/students/studentDetail.vue'),
        meta:{
            firstTitle:'学生管理',
            secondTitle:'学生详情'
        }
 }

第2步:进行传参

  • 标签跳转的方式

<router-link :to="`/home/studentDetail?_id=${item._id}`"><button class="btn detal">查看</button></router-link>
<router-link :to="'/home/studentDetail?_id='+item._id"><button class="btn detal">查看</button></router-link>
<router-link :to="{path:'/home/studentDetail',query:{_id:item._id}}"><button class="btn detal">查看</button></router-link>
//命名路由
<router-link :to="{name:'xsxq',query:{_id:item._id}}"><button class="btn detal">查看</button></router-link>

最后一种写法是使用了命名路由的写法,命名路由的好处就是使用name来指定要跳转位置

  • 编程方式进行跳转

goStudentDetail(_id){
      this.$router.push(`/home/studentDetail?_id=${_id}`)
}
goStudentDetail(_id){
    this.$router.push('/home/studentDetail?_id='+_id)
}
goStudentDetail(_id){
      this.$router.push({
        path:'/home/studentDetail',
        query:{
          _id
        }
      })
 }
 goStudentDetail(_id){
      this.$router.push({
        name:'xsxq',
        query:{
          _id
        }
      })
    }

第3步:接收路由参数

使用this.$route.query方式获取参数

export default {
    components:{BreadCrumb},
    created(){
        console.log(this.$route.query._id);
    }
}
$router和$route

面试题(简单的面试题)

  • router:它是一个VueRouter类型的一个对象,通过new VueRouter构造函数方式将其创建出来,它是一个全局对象

    • 设置路由模式

    • 实现路由跳转:通过该对象中push或者replace方法来实现跳转的

  • route:路由信息对象,它属于一个局部对象,该对象主要用来描述路由信息的

    • 获取该路由path路径

    • 获取该路由的传递的参数(query参数,params参数)

    • 获取该路由的meta信息(用户自定义的信息)

4、params传参

动态路由概念:所谓的动态路由是指路由地址的一部分是变化的,像这种我们将其称为动态路由

http://localhost:8080/#/home/studentUpadate/10001
http://localhost:8080/#/home/studentUpadate/10002
http://localhost:8080/#/home/studentUpadate/10003

如上操作,如果有多条信息,就需要在router/index.js中配置多个路由信息对象,这种做法不可取,原因有两个

  • 配置信息量特别大

  • 这种配置不灵活

为了解决这个问题,我们可以动态路由的方式进行配置,具体配置步骤如下

第1步:在路由配置文件中配置如下

 {
     path:'studentUpdate/:id',
     component:()=>import('@/views/students/studentUpdate.vue'),
     meta:{
         firstTitle:'学生管理',
         secondTitle:'修改学生'
     }
 }

第2步:路由跳转传参

根据跳转方式的不同

  • 标签方式跳转

 <router-link :to="`/home/studentUpdate/${item._id}`"><button class="btn detal">修改</button></router-link>
 <router-link :to="'/home/studentUpdate/'+item._id"><button class="btn detal">修改</button></router-link>
  • 编程方式跳转

 this.$router.push('/home/studentUpdate/'+_id)
  this.$router.push(`/home/studentUpdate/${_id}`)
 goStudentUpdate(_id){
       this.$router.push({
         name:'xsxg',
         params:{
           id:_id
         }
       })
    }

注意:如果要使用push方法的参数是配置对象形式参数,这种params只能和命名路由结合使用,不能和path一起使用

第3步:接收params参数

接收params参数有两个方法

  • 使用this.$route.params.参数名

 console.log(this.$route.params.id);
  • 使用props方式传参

配置步骤

首先:在路由对象设置可以使用props方式接收

{
                name:'xsxg',
                path:'studentUpdate/:id',
                component:()=>import('@/views/students/studentUpdate.vue'),
                meta:{
                    firstTitle:'学生管理',
                    secondTitle:'修改学生'
                },
                props:true 
}

其次:在接收参数的组件中设置props选项

export default {
   props:['id'],
}

最后,在组件中使用

export default {
   props:['id'],
   components:{
      BreadCrumb
   },
   created(){
      // console.log(this.$route.params.id);
      console.log('id:',this.id);
   }
}
5、修改学生
  • 页面返回和页面刷新

<button @click="$router.go(-1)">返回</button>
<button @click="$router.go(0)" >刷新</button>

五、路由模式【面试题】

由于Vue项目为单页面应用,所以整个项目在开发和构建过程中,仅存在一个HTML物理文件,通过路由系统可以实现将项目的组件与可访问的URL路径进行绑定。由于Vue项目只有一个HTML物理文件,切换页面时既需要让访问的URL路径发生变化,又不能触发HTML物理文件的重新加载,这就使得VueRouter的跳转模式不能使用普通的超链接方式。

VueRouter为了支持单页面应用的页面管理和页面跳转,提供了两种页面跳转和加载模式:

  • hash:在浏览器 URL 路径中会有一个'#'

  • history:在浏览器 URL 路径中没有'#'

1、hash模式

hash模式使用了锚点技术重写URL访问路径,会在原有的URL路径后拼接/#/xx,这种方式可以在不重新加载原有HTML文件的基础上,实现切换URL路径的目的,hash模式的原理案例,代码如下

<a href="#/index">首页</a>
    <a href="#/about">关于我们</a>
    <div class="page index">
        我是首页
    </div>
    <div class="page about">
        我是关于页面
    </div>
    <script>
        window.onhashchange=function(event){
            var newURL=event.newURL.split("#/")[1]
            var oldURL=event.oldURL.split("#/")[1]
            var newPage=document.querySelector('.'+newURL)
            var oldPage=document.querySelector('.'+oldURL)
            newPage.style.display="block"
            oldPage.style.display="none"
        }
    </script>

hash模式利用了纯静态技术,解决了单页面应用的页面划分,它可以在不触发网页重新加载的情况下切换URL路径,配合onhashchange可以实现,一旦URL中的hash部分发生变化,就触发函数通知,通过javascript编程便可以很快速的实现DOM对象的切换显示。

hash模式同时也存在着不足之处,如在分布式微前端项目中,嵌套的子应用和主应用都使用hash模式时,由于hash模式的URL路径只能存在一个#,会导致子应用和主应用在定义URL路径上存在着困难,hash模式的URL路径中包含#,也会在视觉上导致URL路径不美观

2、history模式

histroy模式是VueRouter中常用的一种路由模式,它与hash模式不同,不需要借助锚点技术重写URL路径,所以history模式使用的URL路径中不存在#,在视觉上更加美观,histroy模式采用histroy对象中的pushState()函数重写函数URL路径,可在触发重新加载的情况下变更URL路径,history的原理,代码如下

 <a href="javascript:jump('/index')">跳转到首页</a>
    <a href="javascript:jump('/about')">跳转到about页</a>
    <div class="page index">
        我是首页
    </div>
    <div class="page about">
        我是关于页面
    </div>
    <script>
       function jump(path){
        history.pushState(null,'page',path)
        var pages=document.querySelectorAll('.page')
        var newPage=document.querySelector(path.replace("/","."))
        pages.forEach(item=>item.style.display='none')
        newPage.style.display='block'
       }
    </script>

history模式重写URL路径的解决方案与hash模式现象类似,但本质不同,虽然histroy模式可以重写URL路径,但是重写后的新路径中并不包含原有HTML物理文件的访问路径,所以history模式在重写URL路径后,一旦刷新网页会造成404无法访问的效果,VueCli在开发环境中解决了history模式的刷新问题,不过项目发布到生产环境时,由于histroy模式的URL路径问题,还需要配合生产服务器的转发规则重写,用以支持history模式的路由加载。

可以在路由的配置文件中更改路由模式:

const router = new VueRouter({
    routes: routes,
    mode: 'history'
})

不设置 mode 属性,则默认为 hash 模式。

六、路由守卫

1、什么是路由守卫

当路由发生变化的时候,会触发的一些函数,我们这些函数中编写一定业务逻辑,这种函数称为路由守卫函数,也有人称为导航守卫

按照类型将导航守卫分为三大类

  • 全局前置守卫:当所有路由被触发的时候,在进入指定组件之前所触发的守卫函数

  • 路由独享守卫:触发指定路由的路由的时候触发

  • 组件内守卫:当离开组件的时候,或者进入组件的时候触发的守卫函数

2、全局前置守卫
2.1、语法
router.beforeEach((to,from,next)=>{
    
})

参数说明:

  • to:即将要进入目标路由对象

  • from:当前导航正要离开的路由

  • next:是一个函数,该函数的作用是进入到目标路由所指定的组件,或者按照要求进入到指定的组件

案例:防止没有token直接进入后台

第1步:在router/index.js中编写路由全局前置守卫函数,完成token验证

router.beforeEach(async(to,from,next)=>{
    console.log('********进入路由全局前置守卫************');
    if(to.path=="/login"||to.path=="/register"){
        console.log('即将要进入的是登录或者注册组件');
        //放行进入
        next()
    }else{
        //获取token
        let token=getToken()
        if(token){
            let result=await api.users.getUserInfo()
            if(result.code){
                next()//放行进入
            }
        }else{
            alert('您还没有登录,请先登录')
            next('/login')
        }
    }
})

第2步:在二次封装axios的文件中request.js中补全401状态时的执行业务逻辑

axios.interceptors.response.use(response=>{
    return response.data
},err=>{
    if(err.response){
        switch(err.response.status){
            case 401:
                console.log('进入到拦截器的401处理中');
                //弹框提示
                alert('您的token已失效,请重新登录') 
                //进行路由跳转
                router.push('/login')
                break
            case 404:
                break
            case 500:
                break
        }
    }
})
3、路由独享守卫

这种守卫函数,只针对于进入该路由所触发

{
        path:'/home',
        component:()=>import('@/views/Home'),
        children:[
        ],
        //如果进入该路由或者该路由下的子路由都会进入到这个守卫函数
        beforeEnter:async function(to,from,next){
           let token=getToken()
           if(token){
             let {code}=await Vue.prototype.$api.users.getUserInfo()
             if(code){
                next()
             }
           }else{
             alert('您还没有登录,请登录')
             next('/login')
           }
        }
    }
4、组件内守卫

写在组件中文章来源地址https://www.toymoban.com/news/detail-678599.html

   beforeRouteEnter:async function(to,from,next){
        console.log('------进入该组件---------');
        let result=await Vue.prototype.$api.users.getUserInfo()
        if(result.data.auth==1){
            console.log('------我是超级管理员-----------');
            next()
        }else if(result.data.auth==2){
            console.log('-------我是普通管理员----------------------');
            alert('您没有权限进入,请联系系统管理,为您开设权限')
        }
        // let result=await this.$api.users.getUserInfo()
        // console.log('result',result);
    },
    beforeRouteLeave(to,from,next){
        console.log('------离开该组件----------');
        if(this.name==''||this.fcz==''||this.startTime==''){
           if(window.confirm('您还没有输入完所有的信息,您确认你要离开吗?')){
             next()
           }
        }
    }

到了这里,关于VUE笔记(六)vue路由的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端之vue 根据菜单自动生成路由(动态配置前端路由)

    在需要权限控制的页面,往往存在根据用户来显示菜单的情况,单独根据用户类型判断显然不是很好,如果后面用户类型发生变化,项目修改维护可能就会比较麻烦,所以比较好的做法是根据后端返回的菜单动态生成页面路由,以达到完全权限控制的目的,并且若权限发生变

    2024年04月10日
    浏览(42)
  • Vue.js:Vue-Router动态路由从服务器接口获取路由数据

    文档 https://v3.router.vuejs.org/zh/installation.html 版本号 有几种方式实现动态路由: 前端配置 完整路由 ,通过接口返回的数据判断是否可显示,是否可访问 前端配置 部分路由 ,由后端接口返回的数据生成新路由 抛开路由的思维,是否能直接通过 url查询参数 或者是 动态路径参数

    2024年02月08日
    浏览(56)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(79)
  • 【前端技术】Vue3 01:初识 Vue.js

    Vue 可以说是非常流行了,至少在国内是这样,他是个轻量级的 JavaScript 框架,非常适合构建大型和中小型的 Web 应用程序,如果想和前端打交道,应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2  IDE 选择 2.1 vscode 2.2 WebStorm 2.3 Eclipse 3  创建 Vue 应用 3.1 本地脚手架创建 ① 安装

    2024年02月02日
    浏览(64)
  • Vue--》深入理解 Vue 3 导航守卫,掌握前端路由的灵魂技能!

    目录 vue3导航守卫讲解与使用 element-ui的安装与使用 配置路由和设置路径别名

    2024年02月05日
    浏览(50)
  • VUE笔记(六)vue路由

    一、路由的简介 1、实现生活中的路由 路由:路由其实就是一个key-value对应关系 路由器:用于管理多个路由关系的设备被称为路由器 2、前端的路由 目前使用的前端项目都是单页面的应用(SPA),一个项目中只有一个html页面,这种项目是由很多个组件组成,组件之间如果要

    2024年02月11日
    浏览(39)
  • 前端Vue入门-day06-路由进阶

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 路由的封装抽离 声明式导航 导航链接  两个类名  自定义高亮类名  跳转传参 1. 查询参数传参 2. 动态路由传参 两种传参方式的区别  Vue路由  重定向 404 编程式导航

    2024年02月14日
    浏览(46)
  • vue­-router路由和前端状态 管理

    vue­-router路由基本加载 可以分为四步 :具体流程如下 : 安装 在命令行中 进入到自己的项目目录输入一下命令 安装依赖: npm install --save vue-router 在需要用到路由跳转的模块中引用(本文是在在入口文件 main.js 进行设置) import router from ‘vue-router’ Vue.use(router) 配置路由文件,

    2024年02月02日
    浏览(47)
  • Vue路由与node.js环境搭建

    目录 前言 一.Vue路由 1.什么是spa 1.1简介 1.2 spa的特点 1.3 spa的优势以及未来的挑战 2.路由的使用 2.1 导入JS依赖 2.2 定义两个组件 2.3 定义组件与路径对应关系 2.4 通过路由关系获取路由对象 2.5 将对象挂载到vue实例中 2.6 定义触发路由事件的按钮  2.7 定义锚点和路由内容 

    2024年02月07日
    浏览(50)
  • 前端vue2、vue3去掉url路由“ # ”号——nginx配置

    大家好,我是yma16,本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。 html的 hash模式 HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用于在单个页面中显示不同的内容,而不是导航到不同的页面。例如: 在这个示例中, #about 部分是一个锚点,用于在页面上显示关

    2024年02月11日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包