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) => {      //...    }},

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

时间: 2022-05-24

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基本使用

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

vue-router的beforeRouteUpdate不触发问题

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

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({

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

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路由管理器Vue-router的使用方法详解

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

vue iview组件表格 render函数的使用方法详解

如果要在标签中加入属性,例如img 中src属性   a标签中href属性  此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '8px' }, on

对Vue table 动态表格td可编辑的方法详解

项目中需求用到可编辑表格 下图这种 ↓ element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化. <el-table-column label="名称" width="140"> <template scope="scope"> <el-input v-if="scope.row.isEdit && scope

在 Vue 应用中使用 Netlify 表单功能的方法详解

Netlify 带有内置表单处理功能,可以用来存储表单数据,下载 csv 文件,同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求. 它是通过在部署应用时直接解析 HTML 文件,识别 html 中的 form 标签来实现的,本文记录如何在一个 Vue 应用中使用表单功能. 开发 首先使用@vue/cli 新建一个 Vue 应用,完成一系列步骤后,运行应用 vue create my-awesome-app ... yarn serve 创建一个 form 表单 <!-

vue实现购物车抛物线小球动画效果的方法详解

本文实例讲述了vue实现购物车抛物线小球动画效果的方法.分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实现步骤: 1. 需要三个组件,最下方包含蓝色购物车的[购物车]组件shopCart.vue(子组件),每个[加减号]组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件) 2. 原理,

C#事件管理器如何清空所有监听详解

C#事件使用+= -=使用起来是很方便的,但是却不能整体清空所有事件.比如一个常见的操作,打开界面注册监听事件,关闭界面需要把所有的事件清空了,这要在写一堆-=操作,如果漏清空的话肯定会造成隐患,如果在lua里这个很容易,但是C#却不行.所以我想了个办法,对Action和Func进行一次包装,就可以解决这个问题了. 这里我只封装了两个参数,大家可以继续拓展新的参数,我在项目里一共拓展了5个参数,完全够用了. using System; using System.Collections.Gener

浅谈Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

Vue官方推荐AJAX组件axios.js使用方法详解与API

Axios.js作为Vue官方插件的AJAX组件其主要有以下几个特点: 1.比Jquery轻量,但处理请求不多的时候,可以使用 2.基于Promise语法标准 3.支持nodejs 4.自动转换JSON数据 Axios.js用法 axios提供了一下几种请求方式 axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[,

Vue自定义组件双向绑定实现原理及方法详解

前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表,没有去封装列表组件,只要有一点改动,每个页面都得加上.很肯定的说,没有用组件化开发的Vue项目是没有灵魂的.所以如何封装一个优雅且复用性高的组件成为我们必需的技能. Tab自定义组件 首先来看一个Tab组件的实现,看看它存在什么问题,哪里可以改进? 效果 组件 <template> <di

vue-cli之router基本使用方法详解

本文实例为大家分享了vue-cli之router基本使用的具体代码,供大家参考,具体内容如下 1.在src目录下新建router目录,再建立index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import goods from '@/components/goods/goods'; Vue.use(VueRouter); export default new VueRouter({ routes: [ { pat