青岛做一个网站多少钱,开发平台多少钱,农产品电子商务网站建设,wordpress百万文章目录
一、Vue Router
1.1、下载
1.2、基本使用
a#xff09;引入 vue-router.js#xff08;注意#xff1a;要在 Vue.js 之后引入#xff09;. b#xff09;创建好路由规则
c#xff09;注册到 Vue 实例中
d#xff09;展示路由组件
1.3、切换路由的两种方式
1.…目录
一、Vue Router
1.1、下载
1.2、基本使用
a引入 vue-router.js注意要在 Vue.js 之后引入. b创建好路由规则
c注册到 Vue 实例中
d展示路由组件
1.3、切换路由的两种方式
1.3.1、以标签的方式切换
1.3.2、以 js 方式切换
1.3.3、在 VueRouter 中多次切换同一个路由存在问题
a解决方法一每次切换路由前手动判断
1.4、两种传参方式
1.4.1、通过 querystring 传参
1.4.2、通过 restful 传参
1.5、嵌套路由的使用 一、Vue Router 1.1、下载
通过 Vue Router 可以将现有的 Vue 开发更灵活使得一个页面中展示多个不同的组件.
下载地址如下
https://unpkg.com/vue-router/dist/vue-router.js 1.2、基本使用
a引入 vue-router.js注意要在 Vue.js 之后引入. script src../js/vue.js/script!-- router 必须在 vue.js 之后引入 --script src../js/vue-router.js/script b创建好路由规则 //1.创建路由对象const router new VueRouter({//配置路由规则://path: 代表路由路径(#/ 这个哈希路由后面要添加的路由)//component: 代表路由路径对应的组件//redirect: 代表路由重定向//path: * 表示匹配所有路由routes: [// { path: /, component: login }, //配置默认路由(一打开页面就有登录功能)但是规范不建议一个组件对应多个路由{ path: /, redirect: /login }, //因此可以通过 redirect 进行重定向{ path: /login, component: login },{ path: /reg, component: register },{ path: *, component: notFound } //在老的版本这个规则必须放在最后一行但是后续官方做了优化放哪都可以但是建议还是放在结尾]});
这里定义的组件如下 const login {template: divh2登录功能/h2/div,}const register {template: divh2注册功能/h2/div,}const notFound {template: divh2404 not found 页面飞到外太空了~/h2/div,} c注册到 Vue 实例中 const app new Vue({el: #app,data: {msg: Vue路由章节},router //2.注册路由});
d展示路由组件
router-view 标签用来渲染组件 div idapp!-- 3.展示路由组件 --router-view/router-view/div 1.3、切换路由的两种方式
1.3.1、以标签的方式切换 !-- 1.链接 --a href#/login登录/aa href#/reg登录/ahr!-- 2.标签 必须要有 to 属性 to路由路径 --router-link to/login登录/router-linkrouter-link to/reg注册/router-linkhr!-- 3.标签 --router-link :to{path: /login}登录/router-linkrouter-link :to{path: /reg}注册/router-linkhr!-- 4.标签 根据路由对象 name 属性来切换路由 --!-- 推荐路由随时可能会变而命名不会变因此可以起到解耦合的作用 --router-link :to{name: Login}登录/router-linkrouter-link :to{name: Register}注册/router-link
以下是路由规则和组件 const login {template: divh1登录功能/h1/div}const register {template: divh1注册功能/h1/div}//创建路由对象const router new VueRouter({routes: [//name 表示这个路由对象的唯一身份标识{ path: /login, component: login, name: Login },{ path: /reg, component: register, name: Register },]}); 1.3.2、以 js 方式切换
a例如通过点击事件触发路由切换 button clickloginSuccess()一键注册成功/button!-- 展示组件 --router-view/router-view
b注册组件和创建路由规则 const login {template: divh1登录/h1/div}const reg {template: divh1注册/h1/div}const router new VueRouter({routes: [{ path: /, redirect: /reg },{ path: /login, component: login, name: Login },{ path: /reg, component: reg, name: Reg },]});
cjs 切换路由 const app new Vue({el: #app,data: {msg: js 切换路由},methods: {loginSuccess() {// this.$router.push(/login);//不推荐// this.$router.push({ path: /login });//不推荐this.$router.push({ name: Login });//推荐使用名称切换}},router}); 1.3.3、在 VueRouter 中多次切换同一个路由存在问题
在 VueRouter 中多次切换相同路由出现错误如下 有两种解决办法如下 首先我们要知道
this.$route 代表当前路由对象 route.this.$router 代表路由管理器对象 VueRouter.
a解决方法一每次切换路由前手动判断 const app new Vue({el: #app,data: {msg: js 切换路由},methods: {loginSuccess() {//在 VueRouter 中多次切换相同路由出现错误解决办法://1.每次切换前手动判断一下(不推荐太麻烦)if (this.$route.name ! Login) {this.$router.push({ name: Login });}}},router});
b解决方法二官方配置
在创建路由规则对象之后加入如下配置 //2.官方配置解决 VueRouter 中同一路由多次切换报错问题const original VueRouter.prototype.push;VueRouter.prototype.push function push(location) {return original.call(this, location).catch(err err)};
之后你就可以直接写切换路由的方法了. loginSuccess() {this.$router.push({ name: Login });} 1.4、两种传参方式
1.4.1、通过 querystring 传参
例如 /login?namecykpassword1111
a如下四种路由传参方式推荐最后一种 !-- query --a href#/login?namecykpassword123登录/arouter-link to/login?namecykpassword123登录/router-linkrouter-link :to{path: /login, query:{name:cyk, password:1111}}登录/router-linkrouter-link :to{name: Login, query:{name:cyk,password:1111}}登录/router-link
b在组件中获取参数如下 const login {template: divh1登录功能/h1/div,created() { //生命周期已执行完 组件内部事件 和 生命周期函数注册自身的 data、methods、computed 属性注入和校验//通过 querystring 获取参数 console.log(this.$route); //获取当前路由对象console.log(this.$route.query.name);console.log(this.$route.query.password);}}
c路由对象如下 //创建路由对象const router new VueRouter({routes: [//querystring 传参{ path: /login, component: login, name: Login }]}); 1.4.2、通过 restful 传参
例如 /login/cyk/1111
a如下三种传参方式推荐最后一种 !-- restful --a href#/register/6/lyj注册/arouter-link :to{path: /register/11/lyj}注册/router-linkrouter-link :to{name: Register, params:{id:11, name:lyj}}注册/router-link
b在组件中获取参数如下 const register {template: divh1注册功能/h1/div,created() {//通过 restful 获取参数console.log(this.$route); //获取当前路由对象console.log(this.$route.params.id);console.log(this.$route.params.name);}}c路由对象如下 //创建路由对象const router new VueRouter({routes: [//querystring 传参{ path: /login, component: login, name: Login },//restful 传参{ path: /register/:id/:name, component: register, name: Register },]});1.5、嵌套路由的使用
在创建 VueRouter 中path 还有一个 children 参数用来定义嵌套子组件路由.
例如需求
1.现在有一个用户列表 2.当点击 “添加用户信息” 时显示以下对话框 3.点击提交后回归用户列表路由 实现如下 a如下定义组件 template idusersdivh3用户列表/h3router-link :to{name:adduser}添加用户信息/router-linktable border1trtdid/tdtdname/td/trtrtd{{ users.id }}/tdtd{{ users.name }}/td/tr/table!-- 显示嵌套子组件 --router-view/router-view/div/templatetemplate idadd-userdivdivspanid: /spaninput typetext/divdivspanname: /spaninput typetext/divbutton clicksubmit()提交/button/div/templatescript//用户列表const users {template: #users,data() {return {users: [] //这里不能写死需要请求后端得到参数}},created() {//在组件构建完成后请求后端得到 users 的所有数据覆盖空数组this.users { id: 1, name: cyk }}}//添加用户const adduser {template: #add-user,methods: {submit() {//向后端发送请求//提交完成后切换路由this.$router.push({ name: users });}}}/script
b创建路由对象 //创建路由对象const router new VueRouter({routes: [{path: /users, component: users, name: users,children: [ //嵌套子组件路由//注意嵌套路由中子路由不能使用 / 开头{ path: adduser, name: adduser, component: adduser } //可以通过 /users/useradd 访问到此]},]});
c注册到 Vue 实例中 const app new Vue({el: #app,component: {users,adduser},router});
