vue-router笔记

这篇具有很好参考价值的文章主要介绍了vue-router笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目的:为了实现SPA(单页面应用)

vue-router是一个插件库

安装:

npm i vue-router@3

路由的配置路径:/src/router/index.js

路由组件的目录:/src/pages/

一般组件的目录:/src/components/

// 该文件专门用于创建整个应用的路由器
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

Vue.use(VueRouter)
//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        }
    ]
})

使用:

main.js:

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap'
//引入路由器 我们编写的配置类
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    router: router
})

App.vue:

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2 col-2">
        <div class="list-group">
          <!-- Vue中借助router-link标签实现路由的切换 -->
          <router-link active-class="active" class="list-group-item" to="/about">About</router-link>
          <router-link active-class="active" class="list-group-item" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6 col-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

About.vue:

<template>
  <h2>我是About的内容</h2>
</template>

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

不可见的路由组件在哪?        被销毁了

嵌套路由的案例:

<div>
  <h2>我是Home的内容</h2>
  <div class="nav nav-tabs">
    <router-link active-class="active" class="list-group-item" to="/home/news">news</router-link>
    <router-link active-class="active" class="list-group-item" to="/home/message">message</router-link>
  </div>
  <div>
    <router-view></router-view>
  </div>
</div>
{
    path: '/home',
    component: Home,
    children: [
        // 此处不加/了
        {path: 'news', component: News},
        {path: 'message', component: Message},
    ]
}

路由传参:

query:

传参:

<router-link :to="`/home/message/detail?id=${i.id}&title=${i.title}`">{{ i.title }}</router-link>

接收:

<li>消息编号:{{ $route.query.id }}</li>
<li>消息标题:{{ $route.query.title }}</li>

对象写法:

<router-link :to="{
    path:'/home/message/detail',
    query:{
      id:i.id,
      title:i.title,
    }
}">
  {{ i.title }}
</router-link>

命名路由,个人认为没有路径方便:

子路由配置:

{
    name: 'xiangqing',
    path: 'detail',
    component: Detail
}

父路由调用者:

<router-link :to="{
      name:'xiangqing',
      query:{
        id:i.id,
        title:i.title,
      }
 }">
  {{ i.title }}
</router-link>

params传参方式,params的第一种方式:

类似于RestFul风格

子类接收方:

<li>消息编号:{{ $route.params.id }}</li>

父类发送方:

<router-link :to="`/home/message/detail/${i.id}/${i.title}`">
  {{ i.title }}
</router-link>

params传参props接收,params的第二种方式:

children: [
    {
        path: 'detail/:id/:title',
        component: Detail,
        /* 把子路由组件收到的params参数以
         *  prop的形式接收
         */
        props: true,
    }
]
// 比上一种更加简洁
<li>消息编号:{{ id }}</li>

props: ['id']
<router-link :to="`/home/message/detail/${i.id}/${i.title}`">
  {{ i.title }}
</router-link>

query传递prop接收的方式:

{
    path: 'detail',
    component: Detail,
    props({query:{id,title}}) {
        return {id,title}
    }
}
<router-link :to="`/home/message/detail?id=${i.id}&title=${i.title}`">
  {{ i.title }}
</router-link>

replace属性:关闭浏览器左上角的后退和前进的记录,改为replace模式

不用<router-link>标签的情况下,实现路由跳转

自动延迟跳转,编程式路由导航:

this.$router.forward()
this.$router.back()
this.$router.go(1)

如何让组件隐藏后不销毁,这样子路由的News组件切走就不会被销毁了,如果不写News,全部子路由组件都不会销毁

<keep-alive include="News">
  <router-view></router-view>
</keep-alive>

但是组件不销毁,定时器会一直运行

路由的生命周期钩子:

activated() {
  // 组件激活后触发 路由组件专属
  console.log('组件激活后触发')
  this.timer = setInterval(() => {
    this.opacity -= 0.01
    if (this.opacity < 0) this.opacity = 1
  }, 16)
},
deactivated() {
  // 组件失活后触发 路由组件专属
  console.log('组件失活后触发')
  clearInterval(this.timer)
},

路由守卫:

访问路径前先验证身份

全局前置路由守卫:

写在路由配置类里:

// 全局前置路由守卫,初始化也会被调用
router.beforeEach((to, from, next) => {
    if (to.path === '/home/message') {
        if (localStorage.getItem('school') === 'ABC') next()
        else alert('学校名不对 权限不足')
    } else {
        next()
    }
})
export default router

第二种判断是否要鉴权的方式:

{name: 'xinwen', path: 'news', component: News, meta: {isAuth: true}}

router.beforeEach((to, from, next) => {
    if (to.meta.isAuth === true) {
        if (localStorage.getItem('school') === 'ABC') next()
        else alert('学校名不对 权限不足')
    } else {
        next()
    }
})

全局后置路由守卫:

router.afterEach(from => {
    /*
     * 切换完了才调用,切换无权限不会调用
     * 需求:改变网站的title之类的业务
     */
    if (from.meta.title === undefined) return
    document.title = from.meta.title
})

独享路由守卫:

{
    name: 'xinwen',
    path: 'news',
    component: News,
    meta: {isAuth: true, title: '新闻'},
    beforeEnter: ((to, from, next) => {
        // 限制业务代码
        if (localStorage.getItem('school') === 'ABC') {
            next()
        } else {
            alert('学校名不对 权限不足')
        }
    })
},

组件内的路由守卫:

写在组件内

beforeRouteEnter(to, from, next) {
  /*
   * 通过路由规则,进入该组件前被调用
   * 初始化加载导致进入后,不会被调用
   */
  next()
},
beforeRouteLeave(to, from, next) {
  // 通过路由规则,离开该组件前被调用
  // 放行
  next()
}
const router = new VueRouter({
    mode:history,
})

/#/        hash

history模式        与hash模式相比,没有/#/号,非常旧的浏览器可能不支持

/#/home/message        hash值,/#/开头的内容不会发给服务器,如果用户刷新,会发起请求后端

解决方案:

服务器:

npm i connect-history-api-fallback

加上:

const history = require('connect-history-api-fallback')
app.use(history())

项目写完后构建项目:

npm run build

项目名/dist/        打包后的文件

前端项目部署上线:

npm init

输入项目名

选项默认

npm i express

新建server.js,编写服务器启动业务代码:

const express = require('express')
const app = express()
app.use(express.static(__dirname + '/static'))
app.listen(80, err => {
    if (!err) console.log('服务器启动成功了')
})

新建static或者叫public目录

将之前dist目录下的构建好的html等项目文件,放到刚刚新建的static目录下

服务器启动:node server

element-ui按需引入:

生产的时候

官网的教程按需引入的地址:

组件 | Element文章来源地址https://www.toymoban.com/news/detail-516791.html

到了这里,关于vue-router笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向

    💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Vue 是一套用于构建 用户界面 的渐进式 JavaScript 框架。 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注 视图层 ,不仅易于上手,还便于与第三方库或既有项目 整合 。另一方面,当

    2024年04月13日
    浏览(137)
  • vue-router笔记

    目的:为了实现SPA(单页面应用) vue-router是一个插件库 安装: 路由的配置路径:/src/router/index.js 路由组件的目录:/src/pages/ 一般组件的目录:/src/components/ 使用: main.js: App.vue: About.vue: 不可见的路由组件在哪?        被销毁了 嵌套路由的案例: 路由传参: query: 传参

    2024年02月12日
    浏览(47)
  • Vue2学习笔记のvue-router

    hello, 各位小伙伴,本文是Vue2学习笔记的第六篇:Vue-router。 路由 1.理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。 2. 前端路由:key是路径,value是组件。 1.基本使用 1.安装vue-router,命令: npm i vue-router@版本 注意:vue-router

    2024年02月11日
    浏览(28)
  • 【vue3】13-前端路由-Vue-Router的详解: 从入门到掌握

    路由其实是网络工程中的一个术语: 在 架构一个网络 时,非常重要的两个设备就是 路由器和交换机 。 当然,目前在我们生活中 路由器 也是越来越被大家所熟知,因为我们生活中都会用到 路由器 : 事实上, 路由器 主要维护的是一个 映射表 ; 映射表 会决定数据的流向; 路由

    2024年02月09日
    浏览(47)
  • Vue.js:Vue-Router动态路由从服务器接口获取路由数据

    文档 https://v3.router.vuejs.org/zh/installation.html 版本号 有几种方式实现动态路由: 前端配置 完整路由 ,通过接口返回的数据判断是否可显示,是否可访问 前端配置 部分路由 ,由后端接口返回的数据生成新路由 抛开路由的思维,是否能直接通过 url查询参数 或者是 动态路径参数

    2024年02月08日
    浏览(52)
  • 基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

    1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的

    2024年02月02日
    浏览(70)
  • 前端10年进化 Node.js、模块化、CommonJS、AMD、CMD、Webpack、Vue-cli、Electron-vue

    模块化的概念在软件开发领域已经存在很长时间,但在 JavaScript 中的模块化发展相对较晚。以下是对您提出的问题的回答: 提出时间:JavaScript 中的模块化概念相对较早地提出于 CommonJS 规范。CommonJS 是一种 JavaScript 模块化规范,最早在 2009 年由 Ryan Dahl 和其他社区成

    2024年02月11日
    浏览(78)
  • Vue3+Vue-Router+Element-Plus根据后端数据实现前端动态路由——权限管理模块

    提示:文章内容仔细看一些,或者直接粘贴复制,效果满满 提示:文章大概 1、项目:前后端分离 2、前端:基于Vite创建的Vue3项目 3、后端:没有,模拟的后端数据 4、关于路径“@”符号——vite.config.js 文件里修改 提示:以下是本篇文章正文内容,下面案例可供复制粘贴使用

    2024年02月02日
    浏览(58)
  • 【退役之重学前端】使用vite+vue3+vue-router,重构react+react-router前后端分离的商城后台管理系统

    前言: 对前端各个技术板块,HTML、CSS、JavaScript、ES6、vue家族,整体上能“摸其大概”。笔者计划重构一个基于react的商城后台管理系统。 —— 2024年2月16日 vue3 sass bootstrap ES7 前后端分离 分层架构 模块化开发 npm vite git

    2024年02月20日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包