21-Vue-router

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量31 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57262196/article/details/130309149
版权

21.Vue-router

1.前言

1).vue-router 的理解：

vue 的一个插件库，专门用来实现 SPA 应用

2).对 SPA 应用的理解：

  1. 单页 Web 应用（single page web application，SPA）。
  2. 整个应用只有一个完整的页面。
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
  4. 数据需要通过 ajax

3).路由的理解：

①.什么是路由?
  1. 一个路由就是一组映射关系（key - value）
  2. key 为路径, value 可能是 function 或 component
②.路由分类:
a.后端路由：
  1. 理解：value 是 function, 用于处理客户端提交的请求。
  2. 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数
    来处理请求, 返回响应数据。
b.前端路由：
  1. 理解：value 是 component，用于展示页面内容。
  2. 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

2.路由

1.理解：一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理。
2.前端路由：key是路径，value是组件。

1).基本使用

①.安装vue-router：
npm i vue-router
②.引入使用插件：
//引入Vue-router
import VueRouter from "vue-router";
//引入路由器
import router from "@/router";
//使用路由
Vue.use(VueRouter)
③.编写router配置项：

新建一个router文件夹，然后在里面新建一个index.js配置文件

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from '../pages/RuAbout'
import Home from '../pages/RuHome'
//创建并暴露一个路由器
 export default new VueRouter({
     //创建router实例对象，去管理一组一组的路由规则
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
        },
    ]
})
④.实现切换
<!--原生HTML中使用a标签跳转页面-->
<!--<a class="list-group-item active" href="./about.html">About</a>-->
<!--<a class="list-group-item" href="./home.html">Home</a>-->

<!--Vue中借助router-link标签实现路由的切换-->
<!-- active-class可配置高亮样式 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
⑤.指定展示位置
<!--指定组件的呈现位置-->
<router-view></router-view>
⑥.注意点

a.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

b.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

可以在beforeDestroy和mounted两个生命周期中输出内容来验证

/* About组件 */
export default {
  name: "RuAbout",
  beforeDestroy() {
    console.log('About组件即将被销毁')
  },
  mounted() {
    console.log('About组件挂在完毕')
  }
}

/* Home组件 */
export default {
  name: "RuHome",
  beforeDestroy() {
    console.log('Home组件即将被销毁')
  },
  mounted() {
    console.log('Home组件挂在完毕')
  },
}

c.每个组件都有自己的$route属性，里面存储着自己的路由信息。

/* Home组件 */
export default {
  name: "RuHome",
  mounted() {
    console.log(this)
  },
}

d.整个应用只有一个router,可以通过组件的$router属性获取到。

/* About组件 */
export default {
  name: "RuAbout",
  mounted() {
    window.aboutroute=this.$route
    window.aboutrouter=this.$router
  }
}

/* Home组件 */
export default {
  name: "RuHome",
  mounted() {
    window.homeroute=this.$route
    window.homerouter=this.$router
  },
}

3.多级（嵌套）路由

1).配置路由规则

使用children配置项：

/* index.js */
import VueRouter from "vue-router";
//引入组件
import About from '../pages/RuAbout'
import Home from '../pages/RuHome'
import News from '../pages/HomeNews'
import Message from '../pages/HomeMessage'
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            //children:通过children配置子级路由
            children:[
                {
                    //此处一定不要写：/news
                    path:'news',
                    component:News
                },
                {
                    //此处一定不要写：/message
                    path:'message',
                    component:Message
                },
            ],
        },
    ]
})

2).跳转（要写完整路径）：

<ul class="nav nav-tabs">
    <li>
        <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
    </li>
    <li>
        <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
    </li>
</ul>

4.路由传参

新建一个MessageDetail组件作为HomeMessage组件的子组件

<template>
<div>
    <ul>
        <li>消息ID：{{$route.query.id}}</li>
        <li>消息内容：{{$route.query.title}}</li>
    </ul>
    </div>
</template>
<script>
    export default {
        name: "MessageDetail",
        mounted() {
            console.log(this.$route)
        }
    }
</script>

1).query传参

当输出this. r o u t e ，可以发现组件的 route，可以发现组件的 route，可以发现组件的router中有一个query，我们就可以使用query来实现路由之间传递参数

<!-- 父组件 -->
<template>
<div>
    <ul>
        <li v-for="meassage in messageList" :key="meassage.id">
            <!--    跳转路由并携带query参数，to的字符串写法    -->
            <router-link :to="`/home/message/detail?id=${meassage.id}&title=${meassage.title}`">
                {{meassage.title}}
    		</router-link>&nbsp;&nbsp;
    	</li>
    </ul>
    <hr>
    <router-view></router-view>
    </div>
</template>

<template>
  <div>
    <ul>
      <li v-for="meassage in messageList" :key="meassage.id">
        <!--    跳转路由并携带query参数，to的对象写法    -->
        <router-link :to="{
          path:'/home/message/detail',
          query:{
            id:meassage.id,
            title:meassage.title,
          },
        }">{{meassage.title}}
        </router-link>&nbsp;&nbsp;
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: "HomeMessage",
        data(){
            return{
                messageList:[
                    {id:'001',title:'消息001'},
                    {id:'002',title:'消息002'},
                    {id:'003',title:'消息003'},
                ],
            }
        },
    }
</script>

2).命名路由

①.作用

可以简化路由的跳转

②.如何使用：
a.给路由命名：
export default new VueRouter({
routes:[
    {
        //命名路由
        name:'hello',
        path:'/welcome',
        component:Welcome
    },
]
})
b.简化跳转：
<!-- 简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome"></router-link>
<!-- 简化后，直接通过名字跳转 -->
<router-link to="{name:'hello')"></router-link>

<--简化写法配合传递参数->
<router-link
    :to="{
        name:'hello',
        query:
        id:666,
        title:'你好
	}">
跳转
</router-link>

3).params传参

输出this. r o u t e 时，可以发现组件的 route时，可以发现组件的 route时，可以发现组件的router中还有有一个params，我们也可以使用params来实现路由之间传递参数

①.配置路由

在声明接收params参数

export default new VueRouter({
routes:[
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'message',
                component:Message,
                children:[
                    {
                        //命名路由
                        name:'xiangqing',
                        path:'detail/:id/:title',
                        component:Detail,
                    },
                ],
            },
        ],
    },
]
})
②.传递参数
<template>
<div>
    <ul>
        <li v-for="meassage in messageList" :key="meassage.id">
            <!--    跳转路由并携带params参数，to的字符串写法    -->
            <router-link :to="`/home/message/detail/66/你好啊`">{{meassage.title}}</router-link>&nbsp;&nbsp;
    	</li>
    </ul>
    <hr>
    <router-view></router-view>
    </div>
</template>

<template>
<div>
    <ul>
        <li v-for="meassage in messageList" :key="meassage.id">
            <!--    跳转路由并携带params参数，to的对象写法    -->
            <router-link :to="{
                              name:'xiangqing', 
                              params:{
                                  id:meassage.id,
                                  title:meassage.title,
                              	},
                              }">
                {{meassage.title}}
    		</router-link>&nbsp;&nbsp;
    	</li>
    </ul>
    <hr>
    <router-view></router-view>
    </div>
</template>

特别注意：路由携带paramsa参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

③.接收参数：
<template>
  <div>
    <ul>
      <li>消息ID：{{$route.params.id}}</li>
      <li>消息内容：{{$route.params.title}}</li>
    </ul>
  </div>
</template>

4).props配置

①.作用：

让路由组件更方便的收到参数

②.写法：
a.第一种：
//传递参数
//  props的第一种写法：值为对象，该对象中的所有key-value都会以props形式传给Detail组件。
props:{a:1,b:'hello'},

<!-- 接收参数 -->
<template>
  <div>
    <ul>
      <li>消息ID：{{a}}</li>
      <li>消息内容：{{b}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "MessageDetail",
  //第一种写法
  props:['a','b'],
}
</script>
b.第二种：
<!-- 父组件传递通过params传参 -->
    <ul>
        <li v-for="meassage in messageList" :key="meassage.id">
            <!--    跳转路由并携带params参数，to的对象写法    -->
            <router-link :to="{
                              name:'xiangqing',
                              params:{
                                  id:meassage.id,
                                  title:meassage.title,
                              	},
                              }">
                {{meassage.title}}
    		</router-link>&nbsp;&nbsp;
    	</li>
    </ul>

//  props的第二种写法：值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
props:true,

<!-- 接收参数 -->
template>
  <div>
    <ul>
      <li>消息ID：{{id}}</li>
      <li>消息内容：{{title}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "MessageDetail",
  //第二种写法
  props:['id','title'],
}
</script>
c.第三种：
<!-- 父组件传递通过query传参 -->
    <ul>
        <li v-for="meassage in messageList" :key="meassage.id">
            <!--    跳转路由并携带params参数，to的对象写法    -->
            <router-link :to="{
                              name:'xiangqing',
                              query:{
                                  id:meassage.id,
                                  title:meassage.title,
                              	},
                              }">
                {{meassage.title}}
    		</router-link>&nbsp;&nbsp;
    	</li>
    </ul>

//  props的第三种写法：值为函数
//直接传入$route
props($route){
    // return {id:666,title:'早上好'}
    return {id:$route.query.id,title:$route.query.title}
},
//解析赋值{query}
props({query}){
    return {id:query.id,title:query.title}
},
//两次解析赋值{query:{id,title}}
props({query:{id,title}}){
    return {id,title}
},

<!-- 接收参数 -->
<template>
<div>
    <ul>
        <li>消息ID：{{id}}</li>
        <li>消息内容：{{title}}</li>
    </ul>
    </div>
</template>
<script>
    export default {
        name: "MessageDetail",
        //第三种写法
        props:['id','title'],
    }
</script>

5.编程式路由

1).replace属性

①.作用：
控制路由跳转时操作浏览器历史记录的模试
②.浏览器的历史记录有两种写入方式：
分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

③.如何开启replace模式：

<router-link replace class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link replace class="list-group-item" active-class="active" to="/home">Home</router-link>

开启replace模式后，跳转路由后，后面的路由会将前面的路由覆盖掉，除了初始路由地址

2).编程式路由导航

①.作用：

​ 不借助<router-link>实现路由跳转，让路由跳转更加灵活

②.push与replace

输出组件的 r o u t e r ，发现 router，发现 router，发现router中带有push与replace两个方法，可以通过这两个方法实现路由跳转

console.log(this.$router)

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)

this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

<template>
  <div>
    <ul>
      <li v-for="meassage in messageList" :key="meassage.id">
            <router-link :to="{
              name:'xiangqing',
              query:{
                id:meassage.id,
                title:meassage.title,
              },
            }">
              {{meassage.title}}
            </router-link>&nbsp;&nbsp;
            <button @click="pushShow(meassage)">push查看</button>
            <button @click="replaceShow(meassage)">replace查看</button>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "HomeMessage",
  data(){
    return{
      messageList:[
        {id:'001',title:'消息001'},
        {id:'002',title:'消息002'},
        {id:'003',title:'消息003'},
      ],
    }
  },
  methods:{
    pushShow(meassage){
      console.log(this.$router)
      this.$router.push({
        name:'xiangqing',
        query:{
          id:meassage.id,
          title:meassage.title,
        },
      })
    },
    replaceShow(meassage){
      this.$router.replace({
        name:'xiangqing',
        query:{
          id:meassage.id,
          title:meassage.title,
        },
      })
    },
  },
}
</script>
③.back、forward、go

输出组件的 r o u t e r ，发现 router，发现 router，发现router中还带有back、forward、go这三个方法，也可以通过这三个方法实现路由跳转

this.$router.back(): 请求(返回)上一个记录路由

this.$router.forward(): 请求下一个记录路由

this.$router.go(-1): 请求(返回)上一个记录路由

this.$router.go(1): 请求下一个记录路由

<template>
  <div>
    <div class="page-header"><h2>Vue Router Demo</h2></div>
    <button @click="backUrl">后退</button>
    <button @click="forwardUrl">前进</button>
    <button @click="goUrl">测试go</button>
  </div>
</template>
<script>
export default {
  name: "RuBanner",
  methods:{
    backUrl(){
      this.$router.back()
    },
    forwardUrl(){
      this.$router.forward()
    },
    goUrl(){
      // this.$router.go(-2)		//后退
      this.$router.go(3)			//前进
    },
  },
}
</script>

6.缓存路由组件

1).作用：

让不展示的路由组件保持挂载，不被销毁。

如果想在路由组件中写入一些内容，但是路由跳转后，不展示的路由组件就会被销毁，可以设置缓存属性保存内容

未设置缓存：

设置缓存：

2).具体编码：

include属性里面需要写的组件的name属性值，也就是组件名

<!-- 缓存一个组件 -->
<keep-alive include="HomeNews">

<!--  缓存多个组件 -->
<keep-alive :include="['HomeNews','HomeMessage']">
    <router-view></router-view>
</keep-alive>

7.路由组件的两个生命周期钩子

1).前言

需求：在News组件上添加一个透明度持续变化的文字效果

<template>
  <div>
    <hr>
      <ul>
        <li :style="{opacity}">欢迎学习Vue</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
      </ul>
  </div>
</template>
<script>
export default {
  name: "HomeNews",
  data(){
    return {
      opacity:1,
    }
  },
  beforeDestroy() {
    console.log('News组件被销毁');
    clearInterval(this.timer)
  },
  mounted() {
    this.timer = setInterval(()=>{
      console.log('@')
      this.opacity-=0.01;
      if (this.opacity<=0)
        this.opacity=1;
    },16)
  },
}
</script>

但是问题出现：当路由组件News不展示时，定时器并没有停止

为了解决这个问题，就可以使用路由组件独有的两个新的

2).activated和deactivated生命周期钩子

①.作用：

路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

②.具体使用：
a.activated路由组件被激活时触发。
activated() {
    console.log('News组件被激活了')
    this.timer = setInterval(()=>{
      console.log('@')
        this.opacity-=0.01;
        if (this.opacity<=0)
          this.opacity=1;
      },16)
  },
b.deactivated路由组件失话时触发。
deactivated() {
    console.log('News组件被灭活了')
    clearInterval(this.timer)
  },

8.路由守卫

1).作用：

对路由进行权限控制

2).分类：

全局守卫、独享守卫、组件内守卫

①.全局守卫

在设置全局守卫前，可以在路由元信息中设置一个布尔值，作为判断组件是否需要鉴权的依据

const router =new VueRouter({
    routes:[
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            //路由元信息,程序员可以自定义信息
            meta:{
                isAuth:false,
                title:'主页'
            },
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{
                        isAuth:true,
                        title:'新闻'
                    },
                },
                {
                    name:'caidan',
                    path:'message',
                    component:Message,
                    meta:{
                        isAuth:true,
                        title:'菜单'
                    },
                },
            ],
        },
    ]
})
a.全局前置路由守卫
初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next)=>{
    console.log('前置路由守卫',to,from);
    if(to.meta.isAuth){     //判断是否需要鉴权
        if(localStorage.getItem('school')==='hualang'){
            next()
        }else{
            alert('无权限！')
        }
    }else{
        next()
    }
})
b.全局后置路由守卫

初始化的时候被调用、每次路由切换之后被调用

router.afterEach((to, from)=>{
    console.log('后置路由守卫',to,from)
    //修改网页标签
    document.title=to.meta.title || '海底世界';
})
②.独享守卫

可以为一个路由单独设置路由守卫

const router =new VueRouter({
    routes:[
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            //路由元信息,程序员可以自定义信息
            meta:{
                isAuth:false,
                title:'主页'
            },
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{
                        isAuth:true,
                        title:'新闻'
                    },
                    beforeEnter:(to, from, next)=>{
                        console.log('前置路由守卫',to,from);
                        if(to.meta.isAuth){     //判断是否需要鉴权
                            if(localStorage.getItem('school')==='hualang'){
                                next()
                            }else{
                                alert('无权限！')
                            }
                        }else{
                            next()
                        }
                    },
                },
                {
                    name:'caidan',
                    path:'message',
                    component:Message,
                    meta:{
                        isAuth:true,
                        title:'菜单'
                    },
                },
            ],
        },
    ]
})
③.组件内守卫

直接在组件内设置路由守卫

a.进入守卫：

通过路由规侧，进入该组件时被调用

//通过路由规则，进入该组件时被调用
  beforeRouteEnter(to,from,next){
    // console.log('App---beforeRouteEnter')
    // next()
    if(to.meta.isAuth){     //判断是否需要鉴权
      console.log('App---beforeRouteEnter',to,from)
      if(localStorage.getItem('school')==='hualang'){
        next()
      }else{
        alert('无权限！')
      }
    }else{
      next()
    }
  },
b.离开守卫：

通过路由规则，离开该组件时被调用

//通过路由规则，离开该组件时被调用
  beforeRouteLeave(to,from,next){
    console.log('App---beforeRouteLeave',to,from)
    next();
  },
  next()
              }
          },
      },
      {
          name:'caidan',
          path:'message',
          component:Message,
          meta:{
              isAuth:true,
              title:'菜单'
          },
      },
  ],
},
]
})
③.组件内守卫

直接在组件内设置路由守卫

a.进入守卫：

通过路由规侧，进入该组件时被调用

//通过路由规则，进入该组件时被调用
  beforeRouteEnter(to,from,next){
    // console.log('App---beforeRouteEnter')
    // next()
    if(to.meta.isAuth){     //判断是否需要鉴权
      console.log('App---beforeRouteEnter',to,from)
      if(localStorage.getItem('school')==='hualang'){
        next()
      }else{
        alert('无权限！')
      }
    }else{
      next()
    }
  },
b.离开守卫：

通过路由规则，离开该组件时被调用

//通过路由规则，离开该组件时被调用
  beforeRouteLeave(to,from,next){
    console.log('App---beforeRouteLeave',to,from)
    next();
  },
海绵不信
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-router.js
12-30
vue路由vue-router.js文件下载
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
Vue3后台管理系统（十九）路由vue-router
Good Luck
02-25 5130
Vue3后台管理系统（十九）路由vue-router
Vue---路由
qq_45954420的博客
03-07 652
一、相关理解 1.路由就是一组key-value的对应关系 多个路由，需要经过路由器的管理 一个路由就是一组映射关系（key-value） key为路径，value可能是function或component 路由分类: 后端路由： 理解：value是function，用于处理客服端提交的请求 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求， 返回响应数据 前端路由： 理解：value是component，用于展示页面内容 工作过程...
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 3569
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
vue-router 详解
热门推荐
星海IT学习之路
01-16 12万+
文章目录1、认识vue-router2、安装和使用vue-router 1、认识vue-router 目前前端流行的三大框架，都有自己的路由实现： Angular的ngRouter React的ReactRouter Vue的vue-router vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/ vue-router是基于路由和组件的 路由用户设定访问
vue-router 路由超详细教程
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue-router
青蛙king的博客
08-08 9436
一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？ 第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。 二、动态路由匹配 三、嵌套路由 四、编程式的导航 五、命名路由 六、命名视图 七、重定向和别名 八、路由组件传参 九、HTML5 History 模式 ...
vue router-view使用详解（vue2）
蓑笠翁
08-14 8万+
vue2 routerView使用详解
vue3 vue-router使用详解
蓑笠翁
06-17 1万+
vue3引入router详解，vue3+typescript使用Vue-Router包详解。
electron-vue项目搭建-router自动化模块
小dobby
04-13 2207
electron-vue项目搭建-router自动化模块前言路由生成规则router文件实现main.js 挂载路由文件页面demo 前言 之前使用vue-ts生成了基础项目，后来改用了vue-js，流程方法基本是一样的，参考连接： https://blog.csdn.net/qq_39664702/article/details/124046966 路由生成规则 1. 所有页面 vue 文件，需要全部放在@/src/views 中 2. 页面 vue 文件命名规则统一使用`kebab-case` 小写
Vue-Router 4.0
weixin_40746230的博客
05-11 1804
vue-router
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
05-vuerouter.rar
11-06
记录了Vue-router的相关基本操作和配置，包含学习笔记等等，仅供个人学习使用。啦啦啦啦啦啦啦啦啦啦啦啦啦
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1109
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
unplugin-vue-router怎么用
03-29
unplugin-vue-router 是一个插件，用于在 Vue.js 项目中快速生成路由配置。使用 unplugin-vue-router 可以避免手动编写路由配置文件的繁琐工作。 以下是使用 unplugin-vue-router 的步骤： 1. 安装 unplugin-vue-router： ``` npm install unplugin-vue-router --save-dev ``` 2. 在 Vue.js 项目的 main.js 中添加以下代码： ``` import { createRouter } from 'unplugin-vue-router' createRouter({ // 路由配置 }) ``` 3. 在路由配置对象中添加路由信息： ``` import Home from './views/Home.vue' import About from './views/About.vue' createRouter({ routes: [ { path: '/', component: Home, meta: { title: '首页' } }, { path: '/about', component: About, meta: { title: '关于我们' } } ] }) ``` 4. 在 Vue.js 组件中使用路由： ``` <template> <div> <h1>{{ $route.meta.title }}</h1> <router-link to="/">首页</router-link> <router-link to="/about">关于我们</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> ``` 以上就是使用 unplugin-vue-router 的基本步骤。如果需要更详细的使用说明，可以查看官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值