vue-Router学习笔记

1.vue-Router

1.1 基本使用步骤

引入相关库文件

<!-- 1.引入相关的库文件 -->
<!-- 引入vue库文件 -->
<script src='./lib/vue.js'></script>
<!-- 引入vue-router库文件，用于为window对象全局挂载vuerouter构造函数 -->
<script src="./lib/vue-router_3.0.2.js"></script>

添加路由链接router-link

router-link 是vue中提供的标签，默认会被渲染为a标签。

to属性默认会被渲染为href属性
to属性默认会被渲染为#开头的hash地址

<!-- 被vm实例所控制的区域 -->
<div id='app'><!-- 2.添加路由链接 --><router-link to="/user"></router-link><router-link to="/login"></router-link>
</div>

定义路由组件

// 3.定义路由组件
const User = {template:"<h1>用户管理页面</h1>"
}
const Login = {template:"<h1>用户登录页面</h1>"
}

添加路由填充位router-view

router-view是vue提供的路由填充位，也叫路由占位符。将来通过路由规则匹配到的组件，将会渲染到router-view所在的位置。
```

<router-view></router-view>
```
配置路由规则并创建路由实例

每个路由规则都是一个配置对象，其中至少包含path和component两个属性。
- path：表示当前路由规则匹配的hash地址
- component：表示当前路由规则对应要展示的组件
```
// 5.创建路由实例
var router = new VueRouter({// routers是路由规则数组routes:[{ path: "/user", component: User },{ path: "/login", component: Login },]
})
```

把路由挂载到vue根实例中

为了使得路由规则生效，必须把路由对象挂载到vue实例对象上。

// 创建vm实例对象
var vm = new Vue({// 指定控制的区域el:'#app',data:{},// 挂载路由实例对象router:router,methods: {}
});

1.2路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到C路径，从而展示特定组件的页面，通过路由规则的redirect属性，指定一个新的路由地址，可以很方便设置路由的重定向。

 // 创建路由实例var router = new VueRouter({// routers是路由规则数组routes: [{ path: "/", redirect: "/user"},{ path: "/user", component: User },{ path: "/login", component: Login },]})

1.3.嵌套路由

1.3.1嵌套路由用法

子级路由模板

定义父组件

// 4.定义路由组件
const User = {template: "<h1>用户管理页面</h1>"
}
const Login = {template: `<div><h1>用户登录页面</h1><hr/><!--添加子路由链接 --><router-link to="/login/name">用户管理页面</router-link><router-link to="/login/password">用户登录页面</router-link><!--子路由占位符--><router-view></router-view>
</div>
`
}

定义子组件

const Tab1 = {template: "<h1>用户账号</h1>"
}
const Tab2 = {template: "<h3>用户密码</h3>"
}

添加子组件路由

// 创建路由实例
var router = new VueRouter({// routers是路由规则数组routes: [{ path: "/", redirect: "/user" },{ path: "/user", component: User },{ path: "/login", component: Login,children:[{path: "/login/name", component: Tab1},{path: "/login/password", component: Tab2}] },]
})

1.3.2动态路由匹配

添加子路由链接

<!-- 被vm实例所控制的区域 --><div id='app'><!-- 2.添加路由链接 --><router-link to="/user/add">添加用户</router-link><router-link to="/user/edit">修改用户</router-link><router-link to="/user/delete">删除用户</router-link><router-link to="/login">用户登录页面</router-link><!-- 3.路由占位符 --><router-view></router-view></div>

添加子路由路径

// 创建路由实例
var router = new VueRouter({// routers是路由规则数组routes: [{ path: "/", redirect: "/user" },{ path: "/user/:id", component: User },{ path: "/login", component: Login,children:[{path: "/login/name", component: Tab1},{path: "/login/password", component: Tab2}] },]
})

1.3.3带参数的动态路由

定义子组件模板

// 4.定义路由组件const User = {props:["name","password"],template: "<h1>用户管理页面---{{$route.params.id}}---账号:{{uname}}---密码：{{password}}</h1>"}

添加子组件路由

// 创建路由实例var router = new VueRouter({// routers是路由规则数组routes: [{ path: "/", redirect: "/user" },{ path: "/user/:id", component: User, props:{name:"赵四",password:'1234'} },{ path: "/login", component: Login,children:[{path: "/login/name", component: Tab1},{path: "/login/password", component: Tab2}] },]})

还可以这样添加：

 // 创建路由实例var router = new VueRouter({// routers是路由规则数组routes: [{ path: "/", redirect: "/user" },{ path: "/user/:id", component: User, props:route=>({name:"赵四",password:'1234',id: route.params.id}) },{ path: "/login", component: Login,children:[{path: "/login/name", component: Tab1},{path: "/login/password", component: Tab2}] },]})

1.4命名路由

首先，要对子组件路由进行定义

<router-link :to="{ name:'user',parmas:'edit'}">修改用户</router-link>// 创建路由实例
var router = new VueRouter({// routers是路由规则数组routes: [{ path: "/", redirect: "/user" },{ name:"user",path: "/user/:id", component: User, props:route=>({name:"赵四",password:'1234',id: route.params.id}) },{ path: "/login", component: Login,children:[{path: "/login/name", component: Tab1},{path: "/login/password", component: Tab2}] },]
})

1.5页面导航的两种方式

**声明式导航：**通过点击链接实现导航的方式，叫做声明式导航

<router-link :to="{ name:'user',parmas:'edit'}">修改用户</router-link>

编程式导航：通过调用js形式的API实现导航的方式，叫做编程式导航

this.$router.push("/login")
this.$router.go(-1)

router.push()方法的参数规则

//字符串(路径名称)
router.push("/home")
//对象
router.push({ path:"/home" })
//命名的路由(传递参数)
router.push({ name:"/user",params:{ userId:123 } })
//带查询参数，变成/login?uname=lisi
router.push({ path:"/login",query:{uname:"lisi"
}})

江在川上曰：vue-Router学习笔记相关推荐

江在川上曰：js中的JSON解析和序列化
江在川上曰:js中的JSON解析和序列化 JSON解析和序列化 JSON是javascript的一个严格的子集,利用了javacript中的一些模式来表示结构化数据.他只是一种数据格式,并非一种编程语 ...
江在川上曰：vue中使用swiper
vue中使用swiper 1 安装 //这是swiper组件 npm install vue-awesome-swiper --save-dev //这是swiper组件的依赖包 npm instal ...
江在川上曰：云服务器上的flask项目部署(Ubuntu+Flask+Gunicorn+Supervisor+Nginx+Anaconda)
云服务器上的flask项目部署(anaconda.python.flask等相关安装) 在探索未知的路上走了很多弯路,这里记载了我在阿里云上部署项目切实可行的步骤,当然问题因人而异,没有四海皆适用的准 ...
江在川上曰：webpack前端工程化
前端工程化 1.模块化相关规范 1.1浏览器端模块化规范名称文件 AMD Require.js CMD Sea.js 1.2 服务器端模块规范 common.js 1.3 大一统的模块化规范(ES ...
江在川上曰：JS函数
函数函数的定义方式自定义函数(命名函数) 函数表达式(匿名函数) 利用 new Function("参数1","参数2","函数体") ...
江在川上曰：less样式预编译
less样式预编译 1.css原生变量定义使用"–"进行变量定义使用var()进行变量的引用 --bgColor:red; background:var(--bgColor); ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
【Vue】学习笔记-数据交互
[Vue]学习笔记-数据交互概述安装axios 通过axios向后台获取数据数据交互的实现常见错误总结概述基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的.官方推荐使用A ...
Vue 新手学习笔记：vue-element-admin 之入门开发教程（v4.0.0 之前）
说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手架框架布了都没看过干就完事,不过 ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...

江在川上曰：vue-Router学习笔记

vue-Router学习笔记

1.vue-Router

1.1 基本使用步骤

1.2路由重定向

1.3.嵌套路由

1.3.1嵌套路由用法

子级路由模板

添加子组件路由

1.3.2动态路由匹配

1.3.3带参数的动态路由

1.4命名路由

1.5页面导航的两种方式

江在川上曰：vue-Router学习笔记相关推荐

最新文章

热门文章