区块链技术博客
www.b2bchain.cn

5. 前端框架—Vue路由

这篇文章主要介绍了5. 前端框架—Vue路由的讲解,通过具体代码实例进行17864 讲解,并且分析了5. 前端框架—Vue路由的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=17864

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

文章目录

  • 前端框架—Vue路由router
    • 1. 场景模拟
      • 1.1.编写父组件
      • 1.2 编写登录及注册组件
          • login.js内容
          • register.js内容
      • 1.3 在父组件中引用
      • 1.4 存在的问题
    • 2. vue-router简介和安装
    • 3. vue-router快速入门
      • 3.1 在父组件中引入router对象
      • 3.2 页面跳转控制
      • 3.3 效果
    • 4. vue-router案例

前端框架—Vue路由router

1. 场景模拟

一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换:

5. 前端框架—Vue路由

1.1.编写父组件

入口:index.html

<div id="app">     <span>登录</span>     <span>注册</span>     <hr/>     <div>         登录页/注册页     </div> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript">     var vm = new Vue({         el:"#app"     }) </script> 

1.2 编写登录及注册组件

  1. 接下来我们来实现登录组件,以前我们都是写在一个文件中,但是为了复用性,开发中都会把组件放入独立的JS文件中,我们新建一个user目录以及login.js及register.js
  2. 编写组件,这里我们只写模板,不写功能。
login.js内容
const loginForm ={     template:'    <div>n' +         '        <h2>登录页</h2>n' +         '        用&ensp;户&ensp;名:<input type="text"><br/>n' +         '        密&emsp;&emsp;码:<input type="text"> <br/>n' +         '    </div>' }; 
register.js内容
const registerForm ={     template:'    <div>n' +         '        <h2>注册页</h2>n' +         '        用&ensp;户&ensp;名:<input type="text"><br/>n' +         '        密&emsp;&emsp;码:<input type="text"> <br/>n' +         '        确认密码:<input type="text">n' +         '    </div>' }; 

1.3 在父组件中引用

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>index</title>     <script src="../node_modules/vue/dist/vue.js"></script>     <script src="login.js"></script>     <script src="register.js"></script>  </head> <body> <div id="app">     <!--     不能采用<loginForm>这样的写法     因为html中大小写不敏感,会被识别成<loginform>     于是我们采用驼峰式命名法     -->     <login-form></login-form>     <register-form></register-form> </div> </body> <script>     var vue = new Vue({         el: "#app",         data: {             num:0         },         methods: {          },         components:{             loginForm:loginForm,             registerForm:registerForm         }     }); </script> </html> 

效果:

5. 前端框架—Vue路由

1.4 存在的问题

我们期待的是,当点击登录或注册按钮,分别显示登录页或注册页,而不是一起显示。但是,如何才能动态加载组件,实现组件切换呢?虽然使用原生的html5和js也能实现,但是官方推荐我们使用vue-router模块。

2. vue-router简介和安装

  1. 使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。

  2. 官网:https://router.vuejs.org/zh-cn/

  3. 使用npm安装:npm install vue-router --save

5. 前端框架—Vue路由

<!--在index.html中引入依赖--> <script src="../node_modules/vue-router/dist/vue-router.js"></script> 

3. vue-router快速入门

新建vue-router对象,并且指定路由规则:

  • 创建VueRouter对象,并指定路由参数
  • routes:路由规则的数组,可以指定多个对象,每个对象是一条路由规则,包含以下属性:
    • path:路由的路径
    • component:组件名称
// 创建VueRouter对象 const router = new VueRouter({     routes:[ // 编写路由规则         {             path:"/login", // 请求路径,以“/”开头             component:loginForm // 组件名称         },         {             path:"/register",             component:registerForm         }     ] }) 

3.1 在父组件中引入router对象

var vue = new Vue({     el:"#app",     components:{// 引用登录和注册组件         loginForm,         registerForm     },     router:router // 引用上面定义的router对象 }) 

3.2 页面跳转控制

  • 通过<router-view>来指定一个锚点,当路由的路径匹配时,vue-router会自动把对应组件放到锚点位置进行渲染
  • 通过<router-link>指定一个跳转链接,当点击时,会触发vue-router的路由功能,路径中的hash值会随之改变
<div id="app">     <!--router-link来指定跳转的路径-->     <span><router-link to="/login">登录</router-link></span>     <span><router-link to="/register">注册</router-link></span>     <hr/>     <div>         <!--vue-router的锚点-->         <router-view></router-view>     </div> </div> 

3.3 效果

5. 前端框架—Vue路由

注意:单页应用中,页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>router</title>     <script src="../node_modules/vue/dist/vue.js"></script>     <script src="../node_modules/vue-router/dist/vue-router.js"></script>     <script src="login.js"></script>     <script src="register.js"></script> </head> <body> <div id="app">         <span><router-link to="/login">登录</router-link></span>         <span><router-link to="/register">注册</router-link></span>         <hr/>         <!--vue中router的锚点-->         <router-view></router-view> </div> </body> <script>      const router = new VueRouter({        //编写路由规则        routes:[            {                //请求路径必须包括 "/"                path:"/login",                //组件名称                component:loginForm            },            {                path:"/register",                //组件名称                component:registerForm            }        ]     });      var vue = new Vue({         el: "#app",         data: {},         methods: {},         router:router,     }); </script> </html> 

4. vue-router案例

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <div id="app">     <p>         <!-- 使用 router-link 组件来导航. -->         <!-- 通过传入 `to` 属性指定链接. -->         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->         <router-link to="/">首页</router-link>         <router-link to="/student">会员管理</router-link>         <router-link to="/teacher">讲师管理</router-link>     </p>      <!-- 路由出口 -->     <!-- 路由匹配到的组件将渲染在这里 -->     <router-view></router-view> </div> <!-- 需要先引入vue再引入vue-router --> <script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/vue-router/dist/vue-router.js"></script>  <script>     // 1. 定义(路由)组件。     // 可以从其他文件 import 进来     const Welcome = { template: '<div>欢迎</div>' }     const Student = { template: '<div>student list</div>' }     const Teacher = { template: '<div>teacher list</div>' }      // 2. 定义路由     // 每个路由应该映射一个组件。     const routes = [         { path: '/', redirect: '/welcome' }, //设置默认指向的路径         { path: '/welcome', component: Welcome },         { path: '/student', component: Student },         { path: '/teacher', component: Teacher }     ]      // 3. 创建 router 实例,然后传 `routes` 配置     const router = new VueRouter({         routes // (缩写)相当于 routes: routes     })      // 4. 创建和挂载根实例。     // 从而让整个应用都有路由功能     const app = new Vue({         el: '#app',         router     })      // 现在,应用已经启动了! </script> </body> </html> 

本文转自互联网,侵权联系删除5. 前端框架—Vue路由

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 5. 前端框架—Vue路由
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们