Vue-Router（学习的简单记录）

最新推荐文章于 2023-01-07 03:01:00 发布
最新推荐文章于 2023-01-07 03:01:00 发布
阅读量150 收藏
点赞数
分类专栏： Vue-Router 文章标签： vue vue.js javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47416815/article/details/113098122
版权

如何改变URL页面还不刷新
1.hash

location.hash = 'bbb'

2.HTML5的history模式: pushState

// 入栈
history.pushState({},'','home')

// 出栈一个（第一个是栈顶）
history.go(-1)
// 出栈两个
history.go(-2)
// 压栈两个
history.go(2)

// 压栈一个 等于 history.go(1)
history.forward()
// 出栈 history.back() 等于 history.go(-1)
history.back()

//替换操作,没有返回的操作
history.replaceState({},'','about')

1.使用路由的基础配置

在这里插入图片描述
在index.js中写上以下代码

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

//配置路由和组件之间的映射关系
const routes = [

]

//2.创建路由对象
const router = new VueRouter({
  routes
})

//3.将router对象传入到Vue实例中
export default router

Vue实例挂在router

import Vue from 'vue'
import App from './App'
//自己去寻找文件夹中的index.js文件
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

2.配置路由映射关系

const routers = [
  //一个映射关系一个对象
  {
    path: '/home',
    components: Home
  },
  {
    path: '/about',
    components: About
  }
]

//--------文件完整代码如下:-------------

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from "../components/Home";
import About from "../components/About";

//1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

//配置路由和组件之间的映射关系
const routes = [
  //一个映射关系一个对象
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

//2.创建路由对象
const router = new VueRouter({
  routes
})

//3.将router对象传入到Vue实例中
export default router

2.利用router-link 和 router-view 实现简单效果

首先在App.vue中

<template>
  <div id="app">
<!--  router-link是VurRouter中注册的全局组件  -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

页面会显示两个a标签（router-link会被渲染为a标签）,点击任何一个URL都会改变,但是对应的组件内容却没有显示
在这里插入图片描述
此刻我们需要router-view

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

这时候我们浏览器打开, 点击首页或者关于页面 router-link 方就会显示对应的内容
在这里插入图片描述
将router-view放在两个router-link组件内容则会显示在上面

<template>
  <div id="app">
    <router-view></router-view>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

在这里插入图片描述
网页的其他内容和router-view处于一个等级

<template>
  <div id="app">
    <h1>我是标题</h1>
    <a href="">快点点击我</a>
    <div>哈哈哈哈哈哈哈</div>
    <p>-------------------------</p>
    
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

点击a标签切换内容,不会影响其他内容
在这里插入图片描述

3.路由的默认路径

在上面的例子中,我们有了router-link 和 router-view 后打开页面,需要点击首页或者关于,这是router-view才能显示对应的内容.
但是我现在想要页面刚打开URL默认为Home 或 About 对应的组件内容也显示该如何操作

方法1: 在我们的router文件夹下的index.js 配置映射关系的数组中在添加一个

//配置路由和组件之间的映射关系
const routes = [
  {
  	//path: '/' 也是可以的
    path: '',
    component: 'Home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

这时我们重新打开页面,默认显示Home,但是URL确实没有加上/home
在这里插入图片描述
方法2: 配置路由默认路径时这样写

//配置路由和组件之间的映射关系
const routes = [
  //一个映射关系一个对象
  {
    // path: '/'
    path: '',
    // redirect: 重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

这时在打开页面, 不但显示Home组件的内容URL也自动添加上了,所以我们推荐使用redirect的方式
在这里插入图片描述
将URL默认的hash改为history
router文件夹中index.js 创建VueRouter的时候添加一个mode属性

//2.创建路由对象
const router = new VueRouter({
  routes,
  mode: 'history'
})

这样URL中就不会有#
在这里插入图片描述

4.router-link 属性的补充(tag,replace)

router-link默认会渲染为a标签,tag属性可以指定其他标签,例如:

<template>
  <div id="app">
    <h2>我是App组件</h2>
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

在这里插入图片描述

点击router-link跳转到其他URL默认使用的是history.pushState,也就是说是可以点击左上角的前进后退按钮进行操作,加上replace属性就相当于是history.replaceState不可以前进或后退

<template>
  <div id="app">
    <h2>我是App组件</h2>
    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

 
 
 
 
 

5.router-link 处于活跃状态时的class

点击首页按钮,button会自动添加两个class,第一个class和路由嵌套有关,我们使用第二个router-link-active,
需求: 点击哪个按钮哪个按钮的字体就变成红色
在这里插入图片描述
在style中给对应的class添加样式即可

<template>
  <div id="app">
    <h2>我是App组件</h2>
    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  .router-link-active {
    color: #f00;
  }
</style>

在这里插入图片描述
 
 
 
 
 

6.router-link 处于活跃状态时的class如何修改

方法1: 给router-link加上active-class的属性

<template>
  <div id="app">
    <h2>我是App组件</h2>
    <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  .active {
    color: #f00;
  }
</style>

方法二: 创建VueRouter对象时添加一个属性

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

在这里插入图片描述
 
 
 
 
 

7.通过代码的方式修改URL和显示的内容

<template>
  <div id="app">
    <h2>我是App组件</h2>
<!--    <router-link to="/home" tag="button" replace active-class="active">首页</router-link>-->
<!--    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->

<!--    <router-link to="/home" tag="button" replace>首页</router-link>-->
<!--    <router-link to="/about" tag="button" replace>关于</router-link>-->

    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    // 通过代码的方式修改路由 vue-router
    homeClick() {
      //push => pushState
      // this.$router.push('/home')

      this.$router.replace('/home')
    },
    aboutClick() {
      // this.$router.push('/about')

      this.$router.replace('/about')
    }
  }
}
</script>

<style>
  .active {
    color: #f00;
  }
</style>

在这里插入图片描述

8.动态路由–演示

//配置路由和组件之间的映射关系
const routes = [
  //一个映射关系一个对象
  {
    // path: '/'
    path: '',
    // redirect: 重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userId',
    component: User
  }
]

//----------------------

<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link to="/user">用户</router-link>

此时打开浏览器, 首页和关于页面都是没有问题的,但是点击用户页面却没有显示组件内容,因为在index.js配置映射关系的时候写的是/user/:userId而浏览器上的URL却是/user
解决方法1 写死

<router-link to="/user/zhangsan">用户</router-link>

解决方法2 绑定属性

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="'/user/'+userId">用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'lisi'
    }
  },
  methods: {
    // 通过代码的方式修改路由 vue-router
//    homeClick() {
      //push => pushState
      // this.$router.push('/home')

//      this.$router.replace('/home')
//    },
//    aboutClick() {
      // this.$router.push('/about')

//      this.$router.replace('/about')
    }
  }
}
</script>

<style>
  .active {
    color: #f00;
  }
</style>

 
 
 
 
 

8.1动态路由–页面想要获取到URL的userId并在页面显示（params方式）

首先要知道，在之前的代码修改URL实现路由的跳转我们使用了 this.$router 它就是我们index.js中创建的VueRouter对象

在下面例子中我们将使用到this.$route它就是当前处于活跃状态的路由

例子: 现在我想在User.vue中显示 URL动态的userId

<template>
  <div>
    <h2>我是用户界面</h2>
    <p>我是用户的相关信息,嘿嘿嘿</p>
    <h2>{{userId}}</h2>
    <h2>{{$route.params.userId}}</h2>
  </div>
</template>

<script>
export default {
  name: "User",
  computed: {
    userId() {
      // this.$route当前处于活跃的路由
      return this.$route.params.userId
    }
  },
}
</script>

<style scoped>

</style>

 
 
 
 
 

8.2动态路由–页面想要获取到URL的userId并在页面显示（query方式）

URL: 协议: / /主机 : 端口 / 路径? 查询(query)
方式1:

<template>
  <div>
    <h2>我是Profile组件</h2>
    <h2>{{$route.query.name}}</h2>
    <h2>{{$route.query.age}}</h2>
    <h2>{{$route.query.height}}</h2>
  </div>
</template>

<script>
export default {
  name: "Profile"
}
</script>

<style scoped>

</style>//----------------------------
const Profile = () => import('../components/Profile')
{
    path: '/profile',
    component: Profile
}
//----------------------------
<router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.88}}">档案</router-link>
<router-view></router-view>

方式2:

<template>
  <div id="app">
    <h2>我是App组件</h2>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>

    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'zhangsan'
    }
  },
  methods: {
    // 通过代码的方式修改路由 vue-router
    userClick() {
      this.$router.push('/user/'+this.userId)
    },
    profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 18,
          height: 1.87
        }
      })
    }
  }
}
</script>

<style>
  .active {
    color: #f00;
  }
</style>

 
 
 
 
 

9 路由懒加载

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// import Home from "../components/Home";
// import About from "../components/About";
// import User from "../components/User";

const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')

//1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

//配置路由和组件之间的映射关系
const routes = [
  //一个映射关系一个对象
  {
    // path: '/'
    path: '',
    // redirect: 重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userId',
    component: User
  }
]

//2.创建路由对象
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

//3.将router对象传入到Vue实例中
export default router

在这里插入图片描述
 
 

10 嵌套路由

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// import Home from "../components/Home";
// import About from "../components/About";
// import User from "../components/User";

const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')

//1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

//配置路由和组件之间的映射关系
const routes = [
  //一个映射关系一个对象
  {
    // path: '/'
    path: '',
    // redirect: 重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userId',
    component: User
  }
]

//2.创建路由对象
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

//3.将router对象传入到Vue实例中
export default router

在这里插入图片描述
 
 
 

11 导航守卫

1.全局守卫

//配置路由和组件之间的映射关系
const routes = [
  //一个映射关系一个对象
  {
    // path: '/'
    path: '',
    // redirect: 重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    meta: {
      title: '关于'
    },
    component: About
  },
  {
    path: '/user/:userId',
    meta: {
      title: '用户'
    },
    component: User
  },
  {
    path: '/profile',
    meta: {
      title: '档案'
    },
    component: Profile
  }
]

//2.创建路由对象
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

//前置守卫(路由跳转之前执行)
router.beforeEach((to, from, next) => {
  //从from跳转到to
  document.title = to.matched[0].meta.title
  console.log(to);
  next()
})

//后置守卫(路由跳转后执行)
router.afterEach(((to, from) => {
  console.log('-----------')
}))

//3.将router对象传入到Vue实例中
export default router

2.路由独享守卫

{
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    },
    // 路由独享守卫
    beforeEnter: (to,from,next) => {
      console.log('beforeEnter');
      next()
    }
}

 
 
 

12 Keep-alive

让组件不会被频繁的创建和销毁，activated和deactivated这两个生命周期函数只有在被套在Keep-alive标签中才有用

<keep-alive>
      <router-view/>
</keep-alive>

keep-alive的属性
include - 只有匹配的组件会被缓存
exclude - 只有被匹配的组件不会被缓存

<keep-alive exclude="Profile,User">
   <router-view/>
</keep-alive>
小农同学。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue Router
weixin_47124862的博客
07-04 181
Vue Router Vue Router 是 Vue.js 的官方插件，用来快 速实现单页应用。 单页应用 SPA（Single Page Application）单页面应 用程序，简称单页应用。 指的是网站的 “所有” 功能都在单个页面 中进行呈现。 具有代表性的有后台管理系统、移动端、小 程序等。 优点： 前后端分离开发，提高了开发效率。 业务场景切换时，局部更新结构。 用户体验好，更加接近本地应用。 缺点： 不利于 SEO。 初次首屏加载速度较慢。 页面复杂度比较高。 前端路由 前端路由，指
Vue-Router
王依米
09-02 235
路由的概念相信⼤部分同学并不陌⽣，它的作⽤就是根据不同的路径映射到不同的视图。我们在⽤ Vue    开发过实际项⽬的时候都会⽤到    Vue-Router    这个官⽅插件来帮我们解决路由的问题。Vue-Router 的能⼒⼗分强⼤，它⽀持        hash    、    history    、    abstract        3    种路由⽅式，提供了        &l...
vue-router-simple:vue-router 哈希和历史记录
05-29
worldProject setupyarn installCompiles and hot-reloads for developmentyarn serveCompiles and minifies for productionyarn buildLints and fixes filesyarn lintCustomize configurationSee .vueRouter实现...
vue-router之解决addRoutes使用遇到的坑
10-15
在Vue Router中，`addRoutes`是一个非常实用的API，用于在应用运行时动态地添加路由。这在处理用户权限和动态菜单时尤其有用。在上述的场景中，开发者遇到了一个问题，即在用户退出并重新登录后，浏览器控制台会显示...
解决vue-router 切换tab标签关闭时缓存问题
10-15
另外，Vue Router还提供了`router.replace()`方法，它会替换当前的history记录而不是添加新的记录。这理论上可以帮助防止页面状态的保留，但根据你的描述，这种方法可能没有达到预期效果。可能的原因可能是参数传递...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
首先，我们需要在创建VueRouter实例时提供一个`scrollBehavior`方法： ```javascript const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // 返回期望滚动到的位置 } ...
Vue-router
最新发布
m0_53394907的博客
01-07 916
本文包含简单的路由跳转，嵌套路由、路由传参、编程式、路由守卫，hash与history模式以及路由生命周期的简单应用。
vue-router
05-06
vue-router 案例包括一级路由和二级路由的使用方法，为大家提供学习的案例
Vue-Router入门：前端路由与SPA开发
使用npm安装vue-router，例如`npm install vue-router --save`，然后在`main.js`中通过`Vue.use(VueRouter)`将其引入并注册。在项目结构中，通常会创建一个名为`views`的文件夹来存放各个路由对应的视图组件。 基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值