路由常用的配置项:

path:路由请求的路径

component:路由匹配成功后需要渲染的组件或者页面

tag:改变组件内部渲染的元素 假设组件内部渲染的是a标签 tag="li" 那么li就会替换a

import Router from 'vue-router'
import Home from "./views/Home.vue";
import List from "./views/list.vue";
Vue.use(Router) //路由的配置项
export default new Router({
//每一个路由的配置项,每一个路由都是一个对象
routes: [
{
//请求的路径 pathname
path:"/home",
//path路径匹配成功后渲染哪个组件/页面
component:Home
},
{
path:"/list",
component:List
}
]
})

路由跳转的方式:

1、<a href="#/home"></a>

2、<router-link to="/home"></router-link>

to的路径会与path进行匹配,如果匹配成功会渲染component对应的组件

组件怎样才能在页面上进行展示:
必须依赖一个内置组件
<router-view></router-view> //展示路径匹配成功以后相对应的组件 3、直接调用$router.push 实现携带参数的跳转
getDescribe(id){
this.$router.push({
path:'/describe/${id}',
})
}

路由的重定向:

redirect:重定向   (当访问一个路径时想展示另一个路径的页面)

{
path:"/",
redirect:"/home"
}

路由嵌套:

children:路由嵌套

    children是一个数组 数组里存放对象 每一个对象都是下一级的路由的配置项 配置项的属性与routes里面的属性一样

name:命名路由 给当前路由取一个别名

children:[
{
name:"city",
path:"city",
component:City
}
]

路由传参:

路由传参:
tip: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空。 路由的传参接收方式统一在this.$route里面 1、query传值接收方式 query传值?后面的参数 &进行链接 /user?name=zhangsan&age=18 传值的方式:通过?进行数据的拼接 每个字段之间用&分隔 类似与get请求的方式
接收:this.$route.query router.js页面:
{
name:"detail",
path:"/detail",
component:Detail,
} 传递参数地址页面:
//query传值接收方式
let {id,name} = this.$route.query;
this.id = id;
this.name = name; 所要跳转的路径: 1、
<div class="app">
<ul>
<Router-link
v-for="(item,index) in goods"
:to="'/detail?id='+item.id+'&name='+item.goodsName"
tag="li"
> <h2>{{item.goodsName}}</h2>
</Router-link>
</ul>
<router-view></router-view>
</div> 2、
<div class="app">
<ul>
<Router-link
v-for="(item,index) in goods"
:to="{name:'detail',query:{id:item.id,name:item.goodsName}}"
tag="li"
> <h2>{{item.goodsName}}</h2>
</Router-link>
</ul>
<router-view></router-view>
</div> 2、动态路径接收方式
params:参数不会显示到路径上 在路由的配置项path中,设定传递参数的属性 方式为 /:属性.....
在路由跳转的属性中 设置属性的值 方式为 /detail/0/苹果 接收:this.$route.params router.js页面:
{
name:"detail",
path:"/detail/:id/:name",
component:Detail,
} 传递参数地址页面:
//动态路径接收方式
let {id,name} = this.$route.params;
this.id = id;
this.name = name; 所要跳转的路径:
1、
<div class="app">
<ul>
  <Router-link
  v-for="(item,index) in goods"
  :to="'/detail/'+item.id+'/'+item.goodsName"
  tag="li">
    <h2>{{item.goodsName}}</h2>
  </Router-link>
</ul>
<router-view></router-view>
</div> 2、
<div class="app"> <ul>
<Router-link
v-for="(item,index) in goods"
:to="{name:'detail',params:{id:item.id+'',name:item.goodsName}}"
tag="li">
  <h2>{{item.goodsName}}</h2>
  </Router-link>
</ul>
<router-view></router-view>
</div> 3、props接收方法 router.js页面:
{
name:"detail",
path:"/detail/:id/:name",
component:Detail,
props:true,
} 传递参数地址页面:
props:{
id:{
type:String,
default:""
},
name:{
type:String,
default:""
}
},

动态路由传值与query传值的区别:

query传值是非必须传值 动态路由传值是必须要传值

路由钩子函数 路由守卫:

beforRouteEnter 路由进入之前
1、热力图
2、登陆验证
3、权限验证
4、会员 VIP验证
5、验证商品携带信息是否完整 在当前钩子函数中是访问不到this的,因为还没有进入当前组件所以this为undefined
如果需要使用this则需要在next中使用回调,回调中的第一个参数就是组件的实例 进入路由之前
props:{
id:{
type:String,
default:""
},
name:{
type:String,
default:""
}
} beforeRouteEnter(to,from,next){ //to 到哪里去 from 从哪来 next执行下一步
document.title = to.meta.title next((vm)=>{ console.log(vm); });
}, beforRouteUpdate 路由更新的时候 当路由发生了改变,但是当前组件没有经历创建和销毁的时候,如果我们需要接收路由传递过来的数据时
我们就需要用到了beforRouteUpdate props:{
id:{
type:String,
default:""
},
name:{
type:String,
default:""
}
} beforeRouteUpdate (to,from,next) {
//当路由发生改变的时候
console.log("执行了") this.id = to.params.id; this.name = to.params.name; next();
} beforRouteLeave 路由离开的时候
1、信息没有填写完成
2、答题系统
3、支付
4、退出登陆 当路由离开的时候
props:{
id:{
type:String,
default:""
},
name:{
type:String,
default:""
}
} beforeRouteLeave(to,from,next){
var flag = window.confirm("您确定要离开吗?");
if(flag){
next();
}
}
 
全局守卫 全局钩子函数:
beforEach 一般情况下用来做一些路由公众部分的验证 登陆验证

router.beforeEach((to, from, next) => {
if(to.meta.requireAuth){
next();
}else{
if(getCookie("X-TOKEN")){
next()
}else{
next("/login");
}
}
})

【vue】------ 路由创建 ------ 【William】的更多相关文章

  1. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  2. Vue之创建组件之配置路由!

    Vue之创建组件之配置路由!== 第一步: 当然就是在我们的试图文件夹[views]新建一个文件夹比如home 在home文件夹下面新建一个文件index.vue 第二步:在router目录下做如下事 ...

  3. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  4. vue路由详解

    自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤. 安装 直接下载/CDN https://unpkg.com/vue-router/dist/vue-r ...

  5. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  6. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  7. Vue脚手架创建项目

    创建一个基于webpack模板的新项目 D:\Git $ vue -V D:\Git $ vue init webpack my-project ? Project name my-project ? ...

  8. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  9. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  10. vue 路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

随机推荐

  1. Spring事物管理简介 (转)

    一.事物1.什么是事物 事物指的是逻辑上的一组操作,这组操作要么全部成功,要么全部失败 2.事物的特性 原子性:事物是一个不可分割的工作单位,事物中的操作要么都发生,要么都不发生 一致性:事物前后数据 ...

  2. 【朝花夕拾】Android自定义View篇之(五)Android事件分发机制(上)Touch三个重要方法的处理逻辑

    前言 转载请注明,转自[https://www.cnblogs.com/andy-songwei/p/10998855.html]谢谢! 在自定义View中,经常需要处理Android事件分发的问题, ...

  3. 还在被大妈灵魂拷问?使用Python轻松完成垃圾分类!

    目录 0 环境 1 引言 2 思路 3 图像分类 4 总结 0 环境 Python版本:3.6.8 系统版本:macOS Mojave Python Jupyter Notebook 1 引言 七月了 ...

  4. Programming In Lua 第十章

    1,lua中的数据结构都是表来实现的.数组就是索引为数值的表. 2,矩阵就是二维数组,三角矩阵就是矩阵的一半. 3,稀疏矩阵问题: 4, 5, 6,

  5. CSS3边框与圆角

    1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 ...

  6. 2018.8.17 2018暑假集训 关于dp的一些感想(以目前的知识水平)

    学了这么长时间的dp似乎还是不怎么样 谨以此篇文字记录一年以来与dp斗智斗勇的各种经历 关于dp(也就是动态规划)似乎对于每个OIer来说都是一个永远的噩梦. 刚刚开始学dp的时候完全搞不明白(只是觉 ...

  7. HTML标签--入门

    最近开始学习前端的知识,分享自己学的一点东西 <!DOCTYPE html> <!--HTML标识,,,用于告诉浏览器,这是一个HTML文档--> <html> & ...

  8. js random获取随机数,获取任意范围内随机整数

     壹 ❀ 引 想着好久没做笔试题了,去GitHub找了面试相关的项目,结果被第一道题难住了.....说难其实也不难,而是我忘记了取范围随机整数怎么写了,不可否认如果当时是我在笔试,肯定也凉了,那么就由 ...

  9. [记录]Nginx配置实现&&和||的方法实例

    Nginx配置文件中if的&&和||的实现(nginx不支持&&和||的写法) 1.与(&&)的写法: set $condiction '';if ($ ...

  10. 从草图绘制到实施交付:优秀API设计完整流程

    设计好的API是一项繁复的工作,但是优秀的设计是可以通过人为规划实现的,在本文中,我们将研究什么是好的设计以及如何在开发过程中实现它,还将介绍API设计的三个重要阶段:草图绘制,原型设计和交付实施,最 ...