欢迎光临
我的个人博客网站

Vue CLI & vue-router ->(个人学习记录笔记)

@

目录

Vue

1. vue-vli脚手架

1.1 介绍与安装

CLI是什么意思?

  • CLI是 COmmand-Line Interface,翻译为命令行界面,俗称脚手架
  • Vue CLI是一个官方发布vue.js项目脚手架
  • 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

安装脚手架

npm install -g @vue/cli 

拉取脚手架2

npm install @vue/cli-init -g 

1.2 项目初始化

Vue CLI2初始化项目

vue init webpack my-project 

Vue CLI3初始化项目

vue create my-project 

Vue CLI & vue-router ->(个人学习记录笔记)

Vue CLI & vue-router ->(个人学习记录笔记)
Vue CLI & vue-router ->(个人学习记录笔记)
Vue CLI & vue-router ->(个人学习记录笔记)

2. 回顾箭头函数

2.1 基本使用

<script>         //箭头函数:也是一种定义函数的方式         //1. 定义函数的方式:function         const aaa = function(){          }          //2.对象字面量中定义函数         const obj = {             bbb: function(){              },             ccc(){              }         }          //3. ES6中的箭头函数         // const ccc = (参数列表) =>{         // }         const ddd = () => {          }     </script> 

2.2 参数和返回值

<script>   //1. 参数问题   //1.1 两个参数   const sum = (num1, num2) => {     return num1 + num2;   }   //1.2 一个参数   const power = num => {     return num * num;   }    // 2.函数中的代码数量问题   // 2.1 函数代码块中有多行代码时   const test = () => {     //1. 打印HelloWorld     console.log('Hello World');      //2. 打印HelloVuejs     console.log('Hello Vuejs');   }    // 2.2 函数代码块中只有一行代码   // const mul = (num1, num2) => {   //   return num1 * num2;   // }   const mul = (num1, num2) => num1 +num2;   console.log(mul(20, 30));    // const demo = () => {   //   console.log('hello Demo');   // }   const demo = () => console.log('hello Demo');   console.log(demo()); </script> 

2.3 this指向

<script>   // 什么时候使用箭头   // setTimeout(function (){   //   console.log(this);   // },1000)   //   //this = window   //   // setTimeout(() => {   //   console.log(this);   // }, 1000)    //结论:箭头函数中的this引用就是最近作用域中的this   //想外层作用域中,一层层查找this,直到有this的定义   const obj = {     aaa() {       setTimeout(function (){         setTimeout(function (){           console.log(this); //windows         })         setTimeout(() => {           console.log(this);//windows         }, 1000)       },1000)        setTimeout(() => {         setTimeout(function (){           console.log(this); //windows         })         setTimeout(() => {           console.log(this);//obj对象         }, 1000)       }, 1000)     }   }   obj.aaa() </script> 

Vue CLI &amp; vue-router ->(个人学习记录笔记)

3. 路由

  • 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动

阶段
前后端不分离阶段 – > 前后端分离阶段 -> 单页面富应用阶段SPA
整个网页就只有一个html页面


两种修改路由的方式
location.hash= 'home' 不会刷新网页
history.pushState({},'','home') 不会刷新网页 类似栈结构history.back() 可以回退上一个页面
类似历史记录的功能
history.replaceState()就没法后退了上一个页面
history.go(-1) 前进(正数) 后退(负数)
history.back(1) 后退
history.forword(1) 前进

3.1 vue-router安装与配置

  1. 安装vue-router
    npm install vue-router --save 
  2. 在模块化工程中使用它(因为他是一个插件,所有可以通过Vue.use()来安装路由功能)
    导入路由对象,并且调用Vue.use(VueRouter)
    创建路由示例,并且传入路由映射配置
    在Vue实例中挂载创建的路由实例

new Vue({   el: '#app',   router,   render: h => h(App) }) 
import Vue from 'vue' import VueRouter from 'vue-router' import HelloWorld from '@/components/HelloWorld'  // 1.通过Vue.use(插件),安装插件 Vue.use(VueRouter)  //2. 创建路由VueRouter对象 const routes = [   {     path: '/',     name: 'HelloWorld',     component: HelloWorld   } ] const router = new VueRouter({   //配置路由和组件之间的应用关系   routes }) //3.将router对象传入到Vue实例 export default router; 

3.2 vue-router基本使用

基本使用

使用vue-router的步骤:

  1. 创建路由组件
  2. 配置路由映射:组件和路径映射关系
  3. 使用路由:通过<router-link> 跳转功能和<router-view>占位内容显示位置
    import Vue from 'vue' import VueRouter from 'vue-router' import Home from "../components/Home"; import About from "../components/About";  // 1.通过Vue.use(插件),安装插件 Vue.use(VueRouter)  //2. 创建路由VueRouter对象 const routes = [   {     path: '/home',     name: 'Home',     component: Home   },   {     path: '/about',     name: 'About',     component: About   },  ]  const router = new VueRouter({   //配置路由和组件之间的应用关系   routes }) //3.将router对象传入到Vue实例 export default router;  

    Vue CLI &amp; vue-router ->(个人学习记录笔记)


router-link

属性:

  • to : 属于指定跳转的路径
  • tag : tag可以指定<router-link>之后渲染成什么组件
  • replace : replace不会留下history记录, 指定后不会返回到上一个页面中
  • active-class:当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个router-link-activeclass,设置active-class可以修改默认的名称。
    • 在进行高亮显示的导航栏菜单或者底部tabbar时,会使用到该类
    • 但是通常不会修改该类的属性,会直接使用默认的router-link-active即可
<div id="app">  <router-link to="/home" tag="button">首页</router-link>  <router-link to="/about">关于</router-link>  <router-view></router-view> </div> 

router-view

占位内容显示位置

重定向

const routes = [   {     path: '/',     redirect:'/home'   },   {     path: '/home',     component: Home   } ] 

修改路由模式hash->history

linkActiveClass全局修改活跃的属性

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

不用router-link

但是目前相同页面会报错

  • this.$router.push('/home'); 采用的是pushState()
  • this.$router.replace('/home');采用的是replaceState()
<template>   <div id="app">     <button @click="homeClick">首页</button>     <button @click="aboutClick">关于</button>     <router-view></router-view>   </div> </template>  <script> export default {   name: 'App',   methods:{     homeClick(){       // this.$router.push('/home');       this.$router.replace('/home');       console.log('homeClick');     },     aboutClick(){       // this.$router.push('/about');       this.$router.replace('/about');       console.log('aboutClick');     }   } } </script> 

3.3 vue-router动态路由

  • :userId

配置路由

  {     path: '/user/:userId',     name: 'User',     component: User   }, 

App.vue

<template>   <div id="app">     <h2>我是App组件</h2>     <router-link to="/home" tag="button" >首页</router-link>     <router-link to="/about" tag="button" >关于</router-link>     <router-link :to="/user/+userId" tag="button" >用户</router-link>     <br>     <img :src="imgURL" alt="">     <router-view></router-view>   </div> </template>  <script> export default {   name: 'App',   data(){     return{       userId:'lisi',       imgURL:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'     }   } } </script> 

User.vue

  • $route:当前活跃路由
  • $router:路由对象
<template>   <div>     <h2>我是用户界面</h2>     <p>我是用户的相关信息,嘿嘿嘿</p>     <h2>{{userId}}</h2>     <h2>{{$route.params.userId}}</h2>   </div> </template>  <script> export default {   name: "User",   computed:{     userId(){       return this.$route.params.userId;     }   } } </script>  <style scoped>  </style>  

3.4 懒加载

当打包构建应用时,JavaScript包会非常大,影响页面加载
把不同的路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应的组件

一个路由对应一个js文件

懒加载方式,动态导入

const Home = () => import('../components/Home.vue') 

Vue CLI &amp; vue-router ->(个人学习记录笔记)

3.5 vue-router路由嵌套

Vue CLI &amp; vue-router ->(个人学习记录笔记)

const HomeNews = () => import("../components/HomeNews"); const HomeMessage = () => import("../components/HomeMessage"); 
{     path: '/home',     name: 'Home',     component: Home,     children:[       {         path: 'news',         component: HomeNews       },       {         path: 'message',         component: HomeMessage       }     ]   }, 
<template>   <div>     <h2>我是首页</h2>     <p>我是首页内容,哈哈哈</p>     <router-link to="/home/news" tag="button" >新闻</router-link>     <router-link to="/home/message" tag="button" >消息</router-link>     <router-view></router-view>   </div> </template>  <script> export default {   name: "Home" } </script> <style scoped>  </style> 

3.6 vue-router参数传递

两种类型:params和query
params的类型:

  • 配置路由格式:/router/:id
  • 传递的方式: 在path后面跟上对应的值
  • 传递后形成的路径:/router/123,/router/abc

query的类型:

  • 配置路由格式:/router,也就是普通配置
  • 传递的方式:对象中使用query的key作为传递方式
  • 传递后形成的路径:/router?id=123, /router?id=abc
<template>   <div>     <h2>我是Profile组件</h2>     <p>{{$route.query}}</p>   </div> </template>  <script> export default {   name: "Profile" } </script> 
{     path: '/profile',     name: 'Profile',     component: Profile   }, 
<!--    <router-link to="/profile" tag="button">档案</router-link>--> <router-link :to="{path :'/profile',query:{name:'slience',ahe:18,height:1.88}}" tag="button">档案</router-link> 

Vue CLI &amp; vue-router ->(个人学习记录笔记)

3.7 vue-router导航守卫

全局守卫

功能: <title>05-learnvuerouter</title>动态修改
mata:元数据,描述数据的数据

  {     path: '/profile',     name: 'Profile',     component: Profile,     meta:{       title:'个人中心'     },   }, 

获取路由修改内容动态,修改title
导航钩子

//前置钩子(hook)(守卫) router.beforeEach((to, from, next) => {   //从from跳到to   document.title = to.matched[0].meta.title   next() }) 
//后置钩子不需要next() router.afterEach((to,from) => {    }) 

路由独享的守卫

官网
你可以在路由配置上直接定义 beforeEnter 守卫:

const router = new VueRouter({   routes: [     {       path: '/foo',       component: Foo,       beforeEnter: (to, from, next) => {         // ...       }     }   ] }) 

组件内的守卫

最后,你可以在路由组件内直接定义以下路由导航守卫:

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

3.8 keep-alive

  • keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或者避免重新渲染。
  • router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存

属性

  • include – 字符串或正则表达式,只有匹配的组件会被缓存
  • exclude – 字符串或正则表达式,任何匹配的组件都不会被缓存
<keep-alive exclude="Profile,User">   <router-view></router-view> </keep-alive> 

Vue生命周期
Vue CLI &amp; vue-router ->(个人学习记录笔记)

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue CLI & vue-router ->(个人学习记录笔记)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

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

支付宝扫一扫打赏

微信扫一扫打赏