vue中vue-router的使用说明(包括在ssr中的使用)

目录
  • 安装vue-router
  • 创建配置文件
  • 路由映射规则配置
  • 路由设置内容
  • 入口文件配置
  • app.vue配置
  • router中使用props
  • 其他配置属性
  • 导航守卫

vue笔记之vue-router的使用（包括ssr中的使用）

安装vue-router

命令行执行：

npm i vue-router -S

创建配置文件

在项目src文件夹下创建config文件夹存放路由配置

在config文件夹下新建router.js和routes.js

  • router.js: 存放路由设置
  • routes.js: 存放理由映射规则

路由映射规则配置

import Login from '../views/login/login .vue'// import 组件名 from '组件路径'import Register from '../views/register/register.vue'import ChildrenVue from '../views/children/children.vue'export default [  {    path: '/',    redirect: '/login'  },  {    path: '/login',    component: Login ,    name: 'login',    meta: { //保存页面信息      title: 'this is Login ',      description: 'this is Login description'    },    children: [ //子路由      {         path: '/children',         component: ChildrenVue      }    ]  },  {    path: '/register',    component: Register,    name: 'register'  }]

路由设置内容

基本配置：

import Router from 'vue-router' import routes from './routes' //导入router 映射规则const router =  new Router({   routes})export default router

若使用服务端渲染改写为：

import Router from 'vue-router' import routes from './routes' //导入router 映射规则//每次import都创建一个新的router 避免内存溢出export default () => {   return new Router({     routes,     mode: 'history' //改为history模式方便服务端渲染做SEO   })}

入口文件配置

import Vue from 'vue'import VueRouter from 'vue-router'import createRouter from './config/router' //导入router配置文件Vue.use(VueRouter)const router = createRouter() new Vue({  router,  render: (h) => h(App)}).$mount('#root')

app.vue配置

在app.vue中加入：

<router-view></router-view>

给router-view添加切换动画：

<transition name="fade">  <router-view></router-view></transition>

css:

.fade-enter-active, .fade-leave-active {  transition: opacity .5s;}.fade-enter, .fade-leave-to {  opacity: 0;}

router中使用props

路由之前传参可以使用this.$route拿到参数也可以使用props：

{    path: '/login',    props: (route) => ({id: route.query.id}),    component: Login,},

在login页面的export default添加props:

export default {  props: ['id'],  mounted () {    console.log(this.id) //打印传递的参数  },}

浏览器访问得到结果：

浏览器访问得到结果：

其他配置属性

base:

export default () => {  return new Router({    routes,    mode: 'history',    base: '/base/'  })}

设置base之后浏览器访问页面路由path前面会自动加上base配置的值

scrollBehavior :

//scrollBehavior 记录页面滚动的位置下次进来直接滚动到记录的位置export default () => {  return new Router({    routes,    mode: 'history',    scrollBehavior (to, from, savedPosition) {       //savedPosition 记录的位置 如果没有返回最初位置      if (savedPosition) {        return savedPosition      } else {        return {x: 0, y: 0}      }    }  })}

导航守卫

入口文件中配置全局导航守卫：

import Vue from 'vue'import VueRouter from 'vue-router'import createRouter from './config/router' //导入router配置文件Vue.use(VueRouter)const router = createRouter() // 导航守卫-startrouter.beforeEach((to, from, next) => {  console.log('before each invoked')  next()})router.beforeResolve((to, from, next) => {  console.log('before resolve invoked')  next()})router.afterEach((to, from) => {  console.log('after each invoked')})// 导航守卫-endnew Vue({  router,  render: (h) => h(App)}).$mount('#root')

组件内部导航守卫配置：

const footer = {  template: `<div>footer</div>`,  beforeRouteEnter (to, from, next) {    // 在渲染该组件的对应路由被 confirm 前调用    // 不！能！获取组件实例 `this`    // 因为当守卫执行前，组件实例还没被创建  },  beforeRouteUpdate (to, from, next) {    // 在当前路由改变，但是该组件被复用时调用    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。    // 可以访问组件实例 `this`  },  beforeRouteLeave (to, from, next) {    // 导航离开该组件的对应路由时调用    // 可以访问组件实例 `this`  }}

每个路由独享的导航守卫配置：

{    path: '/login',    component: Login,    beforeEnter: (to, from, next) => {      //...    },    beforeResolve: (to, from, next) => {      //...    },    afterEach: (to, from, next) => {      //...    }},

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2安装vue-router报错的解决方法

    vue2安装vue-router报错的解决方法

    目录 项目场景: 问题描述: 原因分析: 解决方案: 附加: 总结 项目场景: 在vue2中安装vue-router 问题描述: 提示:在安装过程中报错,缺少依赖: PS D:\WebDeplpyer\workspace\Vue_Basic\vue_test> npm i vue-routernpm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolvi

  • Vue3使用vue-router如何实现路由跳转与参数获取

    目录 vue-router实现路由跳转与参数获取 路由跳转和传参 路由跳转三种方法的总结 一.第一种 二.第二种 三.第三种 vue-router实现路由跳转与参数获取 路由跳转和传参 import { defineComponent, onMounted, reactive, readonly, ref } from 'vue'; import { useRouter, useRoute } from 'vue-router'; export default defineComponent({

  • vue3使用vue-router及路由权限拦截方式

    目录 使用vue-router及路由权限拦截 vue3使用vue-router讲解 使用vue-router及路由权限拦截 vue3 使用 vue-router 的方式和 vue2 基本一样,只不过初始化路由时需要用到一些函数来定义而已,另外 vue-cli 工具本身在创建 vue3 项目时就可以根据提示来进行安装配置 vue-router , 所以本篇只是针对那些忘记安装的小伙伴. 第一步肯定是要先安装啦: npm install vue-router@4 接着我们在根目录 src 下创建 r

  • 详解vue-router基本使用

    详解vue-router基本使用

    路由,其实就是指向的意思,当我点击页面上的home  按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面显示中,有两个部分,一个是需要点击的部分,一个是点击之后,显示点击内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么才能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念

  • Vue路由管理器Vue-router的使用方法详解

    router-link <router-link> 组件支持用户在具有路由功能的应用中点击导航. 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名 <router-link> 比起写死的 <a href="..." rel="external nofollow" > 会好一些.无论是 H

  • vue-router的beforeRouteUpdate不触发问题

    目录 vue-router beforeRouteUpdate不触发 beforeRouteEnter和beforeRouteUpdate的坑 vue-router beforeRouteUpdate不触发 官方对于beforeRouteUpdate的解释如下: beforeRouteUpdate (to, from, next) {     // 在当前路由改变,但是该组件被复用时调用     // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之

  • vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    目录 如图所示从欢迎页跳转至用户列表 查询相关资料,有两种解决方案 如图所示从欢迎页跳转至用户列表 欢迎页:路径---welcome 用户页:路径---users 可以看到路径发生了跳转,但跳转后的用户列表页面显示空白.路由嵌套代码如下: 查询相关资料,有两种解决方案 1.path路径不用携带/ (未解决) 2.在home页面需添加router-view标签 在home页面的template下添加<router-view> </router-view>后,用户页面占据了整个页面,而

  • vue升级之路之vue-router的使用教程

    使用 Vue 构建的项目,一个页面是由多个组件构成的,而且经常是做成单页面应用,所以在跳转页面的时候,传统的 href 已经跟不上时代的步伐了,于是 vue-router 应运而生 在使用 vue-router 的时候,需要看看自己是否装了这个依赖,没有的话可以使用 npm install vue-router -S ,不过现在构建vue项目时有可以选择是否安装 vue-router,大家注意一下就行了 一.路由的配置 自动安装的vue-router,会在src 文件夹下有个一个 router

  • vue-router-link选择样式设置方式

    目录 vue-router-link选择样式设置 第一种 第二种 hash和history的区别 1.hash 2.history(服务器环境下才有效果) vue-router的link样式设置 vue-router-link选择样式设置 第一种 在router-link组件上 添加属性 active-class=‘ative’ 在css中设置 .actve样式即可 第二种 在css中写样式 router-link-exact-active <template>   <div id=&q

  • vue中vue-router的使用说明(包括在ssr中的使用)

    vue中vue-router的使用说明(包括在ssr中的使用)

    目录 安装vue-router 创建配置文件 路由映射规则配置 路由设置内容 入口文件配置 app.vue配置 router中使用props 其他配置属性 导航守卫 vue笔记之vue-router的使用(包括ssr中的使用) 安装vue-router 命令行执行: npm i vue-router -S 创建配置文件 在项目src文件夹下创建config文件夹存放路由配置 在config文件夹下新建router.js和routes.js router.js: 存放路由设置 routes.js:

  • Vue中this.$router.push参数获取方法

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来指定页面. 及通过路由配置的name属性访问 在路由配置文件中定义参数: 通过name获取页面,传递params: 在目标页面通过this.$route.params获取参数: 2.Query 页面通过path和query传递参数,该实例中row为某行表格数据 在目标页面通过this.$route

  • 对vue2.0中.vue文件页面跳转之.$router.push的用法详解

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .

  • vue中destroyed方法的使用说明

    我们从destroyed的字面意思可知,中文意为是"销毁"的意思,当我们离开这个页面的时候,便会调用这个函数(具体可以看看vue的的生命周期),我们常用来销毁一些监听事件及定时函数,例如: // 销毁监听事件 destroyed() { window.removeEventListener('resize', this.resizeWin) } 从上函数可知,当用户离开页面的时候便会销毁监听事件. 补充知识:vue页面刷新时,执行了哪些生命周期--谨慎使用beforeDestroy和d

  • vue中使用router全局守卫实现页面拦截的示例

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论) 二.使用场景 静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的: 动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了.假如用户

  • Vue中this.$router和this.$route的区别及push()方法

    官房文档里是这样说明的: 通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由 可以理解为: this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法. this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, pa

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • vue.js this.$router.push获取不到params参数问题

    主要通过两种方式传参 1.query方式传参和接受参数 this.$router.push({ path:'/xxx' query:{ idname:id } }) 接收的方式:this.$route.query.id 2.params方式传递参数 this.$router.push({ name:'路径名称' query:{ idname:id } }) 接收的方式:this.$route.params.id 代码 this.$router.push({ path: '/container',

  • vue项目使用$router.go(-1)返回时刷新原来的界面操作

    在项目需求中,我们常常需要使用$router.go(-1)返回之前的页面,但是却发现,之前的界面,保持着上次跳转的状态,比如说:弹框未关闭之类的等等,..... 问题如下: 界面1 : 界面2使用$router.go(-1)返回上一次的界面 由于使用$router.go(-1)返回,导致之前的数据都保留,并未刷新原来的界面,如下:还是显示跳转前的弹框 解决方法1: 不要使用$router.go(-1),而是使用$router.push('某某某'),但是其实这种方法是不合理的,因为你可能跳转的页

  • Vue中 Vue.prototype使用详解

    目录 1. 基本示例 2. 为实例prototype设置作用域 3. 注册和使用全局变量 4. 原型方法的上下文 5. 应用示例 5.1 引入 axios Vue.prototype.Vue.component和Vue.use区别 1.Vue.prototype 2.vue.component 3.Vue.use 我们可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在原型上定义它们使其在每个 Vue 的实例中可用. 1. 基本示例 在main.js中添加一个变量

随机推荐