以前不会vue-cli的时候学过router，当时的写法和在vue-cli中的写法还是有一些不一样的，但是我以后应该还是会用vue的单文件写小程序啊什么的所以我就吧我学习的过程全部记录下来

router创建

那么问题来了main.js是如何接收，接收的是什么，和怎么书写？

下面我们来一一解答

首先我们在src的文件下新建一个router文件，下的index.js我们在js中引入vue组件，配置router，导出router

1.引入的方法 import

2.导出的方法 export default router

代码是：

//第二步引入
import Vue from 'vue'
import VueRouter from 'vue-router'
import Hmoe from '../components/Home.vue'
import Question from '../components/Question.vue'
import Vip from '../components/Vip.vue'
import Course from '../components/Course.vue'//第三步:作为vue的插件
Vue.use(VueRouter)//创建实例 加入配置
const router = new VueRouter({routes:[{path:'/home',component: Hmoe},{path:'/vip',component: Vip},{path:'/coures',component:Course},{path:'/question',component:Question}]
});//吧router导出,这样外面的main才可以用
//为模块指定默认输出
export default router

那么大家看到上面的代码可能没有基础的不知道import Course from '../components/Course.vue'他其实就是我们在components文件下写的Course.vue的这个文件，被传到了上面的index.js这个文件

VS code 怎么样在vue文件中有快捷生产HTML格式

1、选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，输入vue

选择vue后，编辑器会自动打开一个名字为vue.json的文件

2.在复制下面的代码，放进去就可以了

  "Print to console": {"prefix": "vue","body": ["<template>","  <div class='page'>$0</div>","</template>","","<script>","export default {","  data () {","    return {","","    }","  },","  components: {","","  },","}","","</script>","<style>","</style>"],"description": "Log output to console"}
}

Hash和history模式

在router创建的实例中加入mode属性（以下代码为截取的一部分）

#/<路由地址> hash模式 ：无刷新

但是当是以<router-link>来实现路由跳转的时候to属性会自动添加hash模式中的#号to属性的值就是我们路由跳转的地址

/<路由地址> history模式 ：会去请求后端接口在用back,forword,go的方法的时候,当是如果使用pushState和reolaceState方法的时候,这两的方法就可以实现前端路由的目的所以vue-router是通过hash和history这两种模式来控制路由

const router = new VueRouter({mode: 'hash',  //默认情况
})

router-link的相关配置

1.默认router-link是生成的a标签，tag属性可以自定义我们需要生成的标签

2.自动加上了#（hash模式是要加#的）

3.to属性固定我们需要去的路由，:to动态告诉我们要去的路由

4.默认情况下router-link上加active-class属性是支持点击事件的情况下设置的样式

5.跟换默认的事件 events="事件名"

6.全局设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置linkActiveClass:'activeClass',

7.模糊匹配：意思就是 /vip 其实他包含了["/","/vip"]两项所以就是不写/,或者在to=/的项上添加 exact(精准匹配) 就可以了

嵌套路由

这里的定义了一个/vip的路由，但是当我们要嵌套一些子路由就要添加children这个属性在这个属性中定义一个数组在这个数组中在定义一些路由的对象

要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径

    {path: '/vip',component: Vip,children: [{path: 'one',    //这里不可以加/他会主动的生成,加了会报错,只有子路由可以这样component: VipNoe},{path: 'two',component: VipTwo},{path: 'three',component: VipThree},]},

vip.vue文件

<template><div class='page'><h1>我是Vip</h1><div class="nav"><ul><router-link to='/vip/one' tag='li'><a href="#">一级会员</a></router-link><router-link to="/vip/two" tag='li'><a href="#">二级会员</a></router-link><router-link to='/vip/three' tag='li'><a href="#">三级会员</a></router-link></ul>  </div><div class="view"><router-view></router-view></div></div>
</template>

命名路由

给某一个路由添加一个name属性

    {path: '/question',//命名路由name: 'wd',component: Question},

再在<router-link>上这样写

 <!-- <router-link :to="{name:'wd'}">问答</router-link> -->

一般的情况<router-link> 上的to属性值的为路由的地址，但是也可以是含有name属性的对象

命名路由的好处

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({routes: [{path: '/user/:userId',name: 'user',component: User}]
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。(上面的用法下面会由讲的)

命名视图

在路由上这样写

    {path: '/home',// component: Hmoe,//命名视图editorconfigcomponents: {default: Home,  //默认的视图显示的组件left: HomeLeft, //name为left的视图 显示HomeLeft组件right: HomeRight //name为right的视图 显示HomeRighr组件}},

在<router-view>上这样写，没name代表默认值default

<router-view ></router-view>
<router-view name="left"></router-view>
<router-view name="right"></router-view>

重定向和别名

    //重定向：从A到B 这里是从/hello到/course{path: '/hello',redirect: '/vip', //跳转到的页面，字符串写法redirect: '{name:"wd"}', //对象写法redirect: (to) => {     //函数的写法to 路由信息对象if(to.hash) {return '/course'}else{return '/vip'}}//别名：他的另一个名字alias: '/hi'   //意思就是不管是/hello 还是 /hi 都指向redirect的值或component的值},

component：属性值是某一个vue的组件，上面有些案例

redirect：属性值是要跳转的页面，因为有定义过/vip 这个路由，所以会去/vip这个路由中规定的component的值。

这里的to是路由的信息对象；hash就是/后的值

编程方式导航

通过js的方法去改变，路由的行为

      <div class="main"><h1>编程式导航:</h1><p><button @click="pushHandel">push</button><button @click="replaceHandel">replace</button><!-- 回退 --><button @click="backHandle">back</button>  <!-- 前进 --><button @click="forwardHandle">forward</button><!-- 在go方法中的参数,正数代表前进,负数代表后退   --><button @click="goHandle">go</button></p></div></div>

Vue({})中参数对象的值

  methods: {pushHandel () {//console.log(this.$router)//$router写在了main.js中所以可以使用了就跟使用this.$data是同一个道理//这里的this.$router中有很多方法//方法一//push是给浏览器记录栈(history)添加一项，表意为跳转了一下，但是是有新纪录的this.$router.push('/question');},replaceHandel(){//replace是给浏览器记录栈(history)添加一项，表意为跳转了一下，但是不会有新纪录的，他只是替换了记录this.$router.replace('/question')},backHandle(){//后退this.$router.back();},forwardHandle(){//前进this.$router.forward();},goHandle(){//在go方法中的参数,正数代表前进,负数代表后this.$router.go(2);}}

多种写法

// 字符串
router.push('home')// 对象
router.push({ path: 'home' })// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path

params：一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象，当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用

$route.query：一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

动态路由匹配

    {// 动态路径参数 以冒号开头，这里的id类型与一个变量,path: '/user/:id?', //?:代表0或1component: user,props: true, //当这个的props的值为true的时候,这个ID属性就可以传给组件},

那么这样我就可以不管 /user/* /后面的*是什么都可以匹配，没有值也是可以的

那么在子组件接收的方式有

1.$route.params.id

const User = {template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({routes: [{ path: '/user/:id', component: User }]
})

2.通过props

const User = {props: ['id'],template: '<div>User {{ id }}</div>'
}

动态路由监听

方法一：beforeRouteUpdtate

方法二：使用watch监听改变

    //动态监听一//   //就是相/user/1 -> 向/user/2切换的是触发的全局钩子事件beforeRouteUpdate(to, from, next) {//to: Route: 即将要进入的目标 路由对象//from: Route: 当前导航正要离开的路由//next：进行管道中的下一个钩子(也就是我们点击的)this.userInfo = this.userList.filter(item => {return item.id === to.params.id;})[0];// console.log(this.userInfo);不知道为什么会警告next();},//改变后触发事件watch: {$route () {//console.log(this.$route) 这个就是上面的 to 参数的值一样都是路由信息对象}}

全局钩子和路由元信息meta字段

路由元信息meta字段是在配置rouer中的数组对象中添加的用来给一个依据，以便钩子函数来做判断

    {path: '/vip',component: Vip,//路由元信息meta字段meta: {require: true //这里只是为了判断他是否要登录},

挂载进入路由之前,是在进入路由之前执行 全局钩子会影响所有的路由
router.beforeEach((to, from, next) => {//console.log('进入路由之前执行',to.meta);//导航守卫if (to.meta.require) {//需要登入//判断是否已经登录//跳转next(参数为需要跳转的路由)next(); //没有这个无法进入我们点击的路由,所以我们通过控制他来实行导航守卫}else{next()}
})
挂载进入路由之后,是在进入路由之后执行
router.afterEach((to , from) => {if(to.meta.title){document.title = to.meta.title;}else{document.title = '曾皙的第二个router';}
})

路由里的钩子

    {path: '/coures',component: Course,// 写在路由里面的钩子函数// beforeEnter(to,from,next){//     //进入之前执行,和全局的写法不一样//     next();// }},

组件里的钩子

export default {data () {return {}},components: {},//组件中的钩子函数// befoerRouteEnter(to,from,next){//   //进入之前调用// },// beforeRouterLeave (to,from,next){//   //离开后执行// }
}

在vue-cli中使用vue-router的学习笔记相关推荐

Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...
前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
在 vue/cli 中使用 Module Federation
webpack5 的新特性,分模块共同开发.多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们.这通常被称作微前端,但并不仅限于此. 我们分为本地模块 ...
scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？（gxcw）
首先什么是scss呢? scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3. ...
Vue Cli 中使用 jQuery
Vue Cli 中使用 jQuery 方式一: 1.安装 jquery npm install jquery 2.在想要使用 jQuery 的文件里面引入即可: import $ from 'jque ...
vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)／前端知识
文章目录简介安装安装nodejs nvm npm换源单次换源永久换源方法一方法二 Vue/cli安装创建Vue/cli项目解决常见错误用命令行创建项目可视化界面创建项目目录简介 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
中移物联网onenet入门学习笔记2：中移物联的通信格式
中移物联网onenet入门学习笔记2:中移物联的通信格式中移物联网硬件接入协议:LWM2M协议,EDP协议,MQTT协议,HTTP协议,TCP透传,MODBUS协议,JT/T808协议,RCMP协议 ...
前端笔记-vue cli中使用router-link进行路由跳转
目录以前的方法新方法以前的方法以前是通过router的push进行跳转,代码如下: <template><div class="XXXXXXXXXXXXXXXXX& ...
Web前端笔记-js中加载图片文件（vue cli中同样适用）
这里主要是在vue cli项目中加载图片的时候会出现304,特别是使用自己写的js加载图片的时候,此博文记录了解决办法. 在js文件中引用文件 import img from '@/assets/im ...

在vue-cli中使用vue-router的学习笔记