最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

环球新消息丨vue-router

来源:博客园

七.Vue-router

1、什么是vue-router

vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。


(资料图片)

传统页面切换是用超链接a标签进行切换。但vue里是用路由,因为我们用Vue做的都是单页应用,就相当于只有一个主的index.html页面,所以你写的标签是不起作用的,你必须使用vue-router来进行管理。

2、 安装vue-router

vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。npm install vue-router --save-dev 如果你安装很慢,也可以用cnpm进行安装,如果你在使用vue-cli中已经选择安装了vue-router,那这里不需要重复安装了。

3、在 main.js中引入

4、vue-router的使用

4.1 给组件或页面定义路由

4.2路由跳转的方式

方式1:

   

接收参数:

接收的页面中的vue对象中:  this.$route.query.id

方式2:

this.$router.push({path:"/users"})

完整案例:

创建News.vue组件

<script>export default {       name: "News",       data:function(){           return {              newsList:[                   {                       id:"1",                       title:"新闻1",                       content:"新闻1的内容"                   },                   {                        id:"2",                       title:"新闻2",                       content:"新闻2的内容"                   }              ]           }       }}</script>

创建NewsInfo.vue组件

<script>export default{    name:"NewsInfo",    data(){        return {            news:{            id:"",            title:"",            content:""            }        }    },    mounted(){                  //获取传过来的参数id          this.news.id= this.$route.query.id          var newsList=[                   {                       id:"1",                       title:"新闻1",                       content:"新闻1的内容"                   },                   {                        id:"2",                       title:"新闻2",                       content:"新闻2的内容"                   }              ]              var index = newsList.findIndex( item => {                        if(this.news.id == item.id){                            return true;                        }                    });             this.news=newsList[index]                     }}</script>

设置路由:

import { createRouter, createWebHashHistory } from "vue-router";//import Home from "../views/Home.vue";const routes = [   {    path:"/",    name:"News",    component:()=>import("../views/News.vue")  },  {    path:"/newsInfo",    name:"NewsInfo",    component:()=>import("../views/NewsInfo.vue")  }  ];const router = createRouter({  history: createWebHashHistory(),  routes,});export default router;

设置App.vue主组件

4.3 a和router-link的区别

a标签

点击a标签从当前页面跳转到另一个页面通过a标签跳转,页面就会重新加载,相当于重新打开了一个网页

router-link

通过router-link进行跳转不会跳转到新的页面,不会重新渲染,它会选择路由所指的组件进行渲染

总结

通过a标签和router-link对比,router-link避免了重复渲染,不像a标签一样需要重新渲染减少了DOM性能的损耗
文章目录

七.Vue-router

1、什么是vue-router

2、 安装vue-router

3、在 main.js中引入

4、vue-router的使用

4.1 给组件或页面定义路由

4.2路由跳转的方式

4.3 a和router-link的区别

关键词: 因为我们 当前路径 不起作用