文章目录

前言
一、vue router 路由
- 1、基础使用方式
- 2、命名视图和命名路由
- 2-1命名视图
- 2-2 命名路由
- 3、嵌套路由路由传参
- 4、路由的扩展部分路由模式
- 5、路由守卫
总结

前言

一、vue router 路由

1、基础使用方式

1）在vue 下面引入 vue router
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
2) 将之前的样式 style拷贝过来
3）将之前的组件模版 template 拷贝过来
4) 在 vue 实例化前面定义一下

const writeback = {template: '#writeback'
}
const aite = {template: '#aite'
}
const zan = {template: '#zan'
}

主容器 #app 里面写一个结构的架子

 <div id="app"><div class="bili-content"><div class="bili-leftnav"><ul><li></li><li></li><li></li></ul></div><div class="bili-rightcontent"></div></div></div>

在vue 实例化中进行router 实例化

// vue实例化var vm = new Vue({el: '#app',data() {return {}},// 实例化 routerrouter: new VueRouter({// 地址配置 routes: [{},{},{},]})})

7）这里我们实例化vue的时候，属性里面的 router传入一个 VueRouter 的实例，这个数组routes就是详细的路径和对应的组件信息，比如我们浏览器访问 www.lookroot.cn/writeback的时候，页面就展示上面定义好的 writeback组件

8）实例化部分这样写

  // vue实例化var vm = new Vue({el: '#app',data() {return {}},// 实例化 routerrouter: new VueRouter({// 地址配置routes: [{path: '/writeback',component: writeback,},{path: '/aite',component: aite},{path: '/zan',component: zan},]})})

9）在主容器这样使用

 <div id="app"><div class="bili-content"><div class="bili-leftnav"><ul><li>//  这个地方用到 router-link 的方式 <router-link to="/writeback">回复我的</router-link></li><li><router-link to='/aite'>@我的</router-link></li><li><router-link to='/zan'>赞我的</router-link></li></ul></div><div class="bili-rightcontent"><router-view></router-view></div></div></div>

10）这样大致展示了效果原本的导航也要进行修改 这个 router-link就会在页面中渲染成a标签，作为导航

11）需要区别一下我当前选中的颜色 区别一下加一个不同颜色就可
在 style 里面添加

 /* 显示当前显示路由的颜色 */li .router-link-active {color: skyblue;}

12）加一点动画 将之前的动画效果拿过来

<div class="bili-rightcontent"><transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeInUp"mode="out-in" :duration="200">//  这个地方需要注意 是这个<router-view></router-view></transition>
</div>

13)引入动画库 <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
14）基本的效果达到了动画效果加上了

15）现在有个小问题需要处理一下我想它初始状态就在writeback 界面怎么实现？
需要用到 router 重定向 加一点东西就可以

// router 重定向 {// 因为网页打开初始状态后面就会加一个斜杠path: '/',// 跳转到那？ 到 writeback 组件redirect: '/writeback'},

2、命名视图和命名路由

一点补充的内容需要知道一下
1、 router 实例里面有个模式选择

// 实例化 routerrouter: new VueRouter({// 模式选择mode: 'history',  // 地址配置routes: [],

好处是 地址拦地址变得简洁 http://127.0.0.1:5500/writeback
坏处是复制地址到其他地方无法打开
默认是 mode:'hash'
就是这个长串的东西 http://127.0.0.1:5500/4%E3%80%81%20router/routerfirst.html#/writeback

2-1命名视图

为啥需要取名字？因为需要展示多个视图也就是需要展示多个 router-view
1）

2）

  <!-- vuefooter 组件模版 --><template id="vuefooter"><div><h2>footer</h2></div></template>

3） vue实例化之前定义这样不用注册

 const vuefooter = {template: '#vuefooter'}

4）在 router实例化的 routes: [ ] 里面更改一下 wirteback的内容

{path: '/writeback',// component: writeback,// 因为这个地方需要展示两个 组件components: {// 这个展示的是默认没有名字的  router-viewdefault: writeback,// 下面这个展示有名字 name='common'的组件common: vuefooter}},

5）展示效果

2-2 命名路由

1）我们给路由也起名字，这样方便使用，这里还是以 writeback为例

{path: '/writeback',//点击的路径// 命名视图components: {default: writeback,common: vuefooter},// 命名路由name: 'writeback',
},

2）修改它的导航链接，这样就完成了

<router-link :to="{name:'writeback'}">回复我的</router-link>

3、嵌套路由路由传参

2）定义上图的 2 这部分 子组件

  <!-- 这个是上图 2 部分 --><!-- 这是子组件 --><template id="mymsg"><div><div>{{username}}的消息</div><ul><ol v-for="index in 10"><!-- 这里的index  作为id 传递 --><router-link :to="'/mymsg/msgcontent/'+ index">用户{{index}}</router-link></ol></ul></div></template>

3）定义上图的 3 这部分 子组件的子组件

 <!-- 这个是上图 3 部分 --><!-- 这是子组件的子组件 --><template id="msgcontent"><div><!-- 路由传参 -->这是和用户{{index}}具体的聊天界面</div></template>

4）在vue 实例化前定义一下

 const mymsg = {template: '#mymsg'}const msgcontent = {template: '#msgcontent'}

router 实例化的routes中写出来

{path:'/mymsg',component:mymsg}

6）页面使用一下在上面的 <div class="bili-leftnav">增加一组li显示

<li><router-link to='/mymsg'>我的消息</router-link></li>

7）当前的关系和情况

8）增加一点内容 mymsg

const mymsg = {template: '#mymsg',data() {return {username: ''}},created() {// 父组件将信息传递给子组件 username从哪里来  // 这是第一种传值方式  配合9）this.username = this.$route.query.username;}}

9）如果我先在这个 li 里面写一个 fhj

<li><router-link to="/mymsg?username='fhj'">我的消息</router-link></li>

页面就会显示

10）下一步需要做的事情是
点击用户1-10 后面的具体消息展示出来也就是说 msgcontent 展示出来
11）在下面的routes里面补充

          {path: '/mymsg',component: mymsg,// 嵌套在里面的路由children: [// 第二中路由传值 方式 {path: 'msgcontent/:index',component: msgcontent,// 改成false 无法切换props: true,}]}

12）需要在上面的 msgcontent 定义 index

  const msgcontent = {template: '#msgcontent',// props 父组件向子组件传值props: ['index']}

4、路由的扩展部分路由模式

1)定义两个组件模板

<template id="page1"><div>page1</div>
</template>
<template id="page2"><div>page2</div>
</template>

定义这两个组件

const page1 = {template: '#page1',
}
const page2 = {template: '#page2',
}

3)实例化一个router，

 const router = new VueRouter({mode: 'hash',routes: [{// 重定向 到 page1 path: '/',redirect: '/page1',},// page1 的名字是page1{path: '/page1',component: page1,name: 'page1',},// page2的名字是page2{path: '/page2',component: page2,name: 'page2',},],});

接下来是在#app 容器中使用它
这次不使用<router-link></router-link>
我们使用另外一种路由跳转的方式编程式的导航

<div id="app"><button @click="gotoPage('./page1')"></button><button @click="gotoPage('./page2')"></button><router-view></router-view></div>

vue 实例中 写到methods里面

methods: {gotoPage(path) {// 编程式的导航 this.$router.push(path)}
},

暂且看一下实现的效果
点击page1 时出现page1 点击page2时出现 page2

5、路由守卫

1）守卫嘛，就是拦截放行的效果
首先我们在vue的原型指向上挂载一个属性，用来记录用户是否登录

 // 初始定义为 false 表示未登录的状态Vue.prototype.isLogn = false;

2）然后编写，第三个组件 login，并添加一个login点击事件

<template id="login"><div><button @click="login">login</button></div>
</template>

3)然后定义这个组件,并编写点击事件，点击就修改isLogin的值为 true，并使用this.$router.back返回上一个页面

   // 定义loginconst login = {tempalte: '#login',methods: {login() {Vue.prototype.isLogin = true,// 使用 下面这个返回this.$router.back()}}}

然后配置路由信息

{path: '/login',component: login,name: 'login'
},

app 容器中使用

    <div id="app"><button @click="gotoPage('/page1')">page1</button><button @click="gotoPage('/page2')">page2</button><button @click="gotoPage('/login')">login</button><router-view></router-view></div>

实现效果

7） router 实例化完成后设置全局守卫

// 设置守卫router.beforeEach((to,from,next)=>{})

设置守卫 更新一下变成这样

    // 设置守卫// to  要去的页面router.beforeEach((to, from, next) => {// 目的为了去meta 里面到isLogin 看是不是trueif (to.matched.some(item => item.meta.isLogin)) {if (!Vue.prototype.isLogin) {next({name: 'login'})} else {next();}// 如果里面没有这个isLogin 直接跳转} else {next();}})

9）实现的效果是未登录不能查看页面点击login 之后才能看

总结

vue 精简教程（四) vuerouter 路由相关推荐

项目前端（一）、vue项目中引入vue-router路由组件
1.在项目根目录下,执行 npm install vue-vouter 是否成功引入router路由组件,我们可以查看package.json文件中dependencies标签下是否有vue-rout ...
Vue中vue-router路由使用分析
题记 -- 严于律己,精于行动,点滴积累,着眼未来,你也许不负青春本小节描述 1.前端路由的两种主流实现方式 hash 与 history对象简述 2.分析使用在 vue 中通过 vue-rout ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
vue知识（四）生命周期、钩子函数、路由
文章目录一.生命周期 (一)vue生命周期二.钩子函数 (一)钩子函数 (二)4大阶段8个方法 (1)如何知道vue生命周期到达了什么阶段? (2)钩子函数有哪些 (三)初始化 (1)new Vu ...
Vue实现角色权限动态路由详细教程，在vue-admin-template基础上修改，附免费完整项目代码
前言 vue-admin-template是一个最基础的后台管理模板,只包含了一个后台需要最基础的东西,如果clone的是它的master分支,是没有权限管理的,只有完整版vue-element-ad ...
【Vue】vue-router 路由
文章目录一.什么是vue router 二.vue router的安装三.vue router的使用第一步:依赖组件的搭建第二步:路由配置文件的创建于配置第三步:在App.vue中使用路由 ...
三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象) ...
vue多html页面路由配置,vue-router——路由配置
一.什我自址哈这工边识框处己按后大都加控不架的么是vue-r比抖朋要插支一圈不者地器享说几outer vue年有这只制明个手近天点里要它出水机近天点-router路由插件,这里的路由并不是指我们平时所 ...
vue学习之VueRouter 路由
文章目录 vue router 1.认识路由的概念 1.1.何为路由 1.2.后端路由阶段 1.3.前端路由阶段 1.4.前端渲染和后端渲染? 2.前端路由的规则 2.1.URL的hash 方式 2. ...

vue 精简教程（四) vuerouter 路由

文章目录

前言

一、vue router 路由

1、基础使用方式

2、命名视图和命名路由

2-1命名视图

2-2 命名路由

3、嵌套路由路由传参

4、路由的扩展部分路由模式

5、路由守卫

总结

vue 精简教程（四) vuerouter 路由相关推荐

最新文章

热门文章

vue 精简教程（四) vuerouter 路由

文章目录

前言

一、vue router 路由

1、基础使用方式

2、命名视图和命名路由

2-1命名视图

2-2 命名路由

3、嵌套路由 路由传参

4、路由的扩展部分 路由模式

5、路由守卫

总结

vue 精简教程（四) vuerouter 路由相关推荐

最新文章

热门文章

3、嵌套路由路由传参

4、路由的扩展部分路由模式