正文 

当前位置： 首页 > 开发 > java教程

vue之路由(代码片段)

yaucheun yaucheun     2022-12-08     387

关键词：

Vue之路由

  1. **后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
  2. **前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
  3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在 vue 中使用 vue-router

  1. 导入 vue-router 组件类库：
<!-- 1. 导入 vue-router 组件类库 -->
  <script src="./lib/vue-router-2.7.0.js"></script>
  1. 使用 router-link 组件来导航
<!-- 2. 使用 router-link 组件来导航 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
  1. 使用 router-view 组件来显示匹配到的组件
<!-- 3. 使用 router-view 组件来显示匹配到的组件 -->
<router-view></router-view>
  1. 创建使用Vue.extend创建组件
    // 4.1 使用 Vue.extend 来创建登录组件
    var login = Vue.extend(
      template: ‘<h1>登录组件</h1>‘
    );

    // 4.2 使用 Vue.extend 来创建注册组件
    var register = Vue.extend(
      template: ‘<h1>注册组件</h1>‘
    );
  1. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
    var router = new VueRouter(
      routes: [
         path: ‘/login‘, component: login ,
         path: ‘/register‘, component: register 
      ]
    );
  1. 使用 router 属性来使用路由规则
// 6. 创建 Vue 实例，得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      router: router // 使用 router 属性来使用路由规则
    );

使用tag属性指定router-link渲染的标签类型

设置路由重定向

设置路由高亮

设置路由切换动效

在路由规则中定义参数

  1. 在规则中定义参数：
 path: ‘/register/:id‘, component: register
  1. 通过 this.$route.params来获取路由中的参数：
var register = Vue.extend(
      template: ‘<h1>注册组件 --- this.$route.params.id</h1>‘
    );

使用 children 属性实现路由嵌套

  <div id="app">
    <router-link to="/account">Account</router-link>

    <router-view></router-view>
  </div>

  <script>
    // 父路由中的组件
    const account = Vue.extend(
      template: `<div>
        这是account组件
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    );

    // 子路由中的 login 组件
    const login = Vue.extend(
      template: ‘<div>登录组件</div>‘
    );

    // 子路由中的 register 组件
    const register = Vue.extend(
      template: ‘<div>注册组件</div>‘
    );

    // 路由实例
    var router = new VueRouter(
      routes: [
         path: ‘/‘, redirect: ‘/account/login‘ , // 使用 redirect 实现路由重定向
        
          path: ‘/account‘,
          component: account,
          children: [ // 通过 children 数组属性，来实现路由的嵌套
             path: ‘login‘, component: login , // 注意，子路由的开头位置，不要加 / 路径符
             path: ‘register‘, component: register 
          ]
        
      ]
    );

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: ,
      methods: ,
      components: 
        account
      ,
      router: router
    );
  </script>

命名视图实现经典布局

  1. 标签代码结构：
<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>
  1. JS代码：
<script>
    var header = Vue.component(‘header‘, 
      template: ‘<div class="header">header</div>‘
    );

    var sidebar = Vue.component(‘sidebar‘, 
      template: ‘<div class="sidebar">sidebar</div>‘
    );

    var mainbox = Vue.component(‘mainbox‘, 
      template: ‘<div class="mainbox">mainbox</div>‘
    );

    // 创建路由对象
    var router = new VueRouter(
      routes: [
        
          path: ‘/‘, components: 
            default: header,
            a: sidebar,
            b: mainbox
          
        
      ]
    );

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: ,
      methods: ,
      router
    );
  </script>
  1. CSS 样式：
  <style>
    .header 
      border: 1px solid red;
    

    .content
      display: flex;
    
    .sidebar 
      flex: 2;
      border: 1px solid green;
      height: 500px;
    
    .mainbox
      flex: 8;
      border: 1px solid blue;
      height: 500px;
    
  </style>

watch属性的使用

考虑一个问题：想要实现 名 和 姓 两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）

  1. 监听data中属性的改变：
<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>fullName</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: 
        firstName: ‘jack‘,
        lastName: ‘chen‘,
        fullName: ‘jack - chen‘
      ,
      methods: ,
      watch: 
        ‘firstName‘: function (newVal, oldVal)  // 第一个参数是新数据，第二个参数是旧数据
          this.fullName = newVal + ‘ - ‘ + this.lastName;
        ,
        ‘lastName‘: function (newVal, oldVal) 
          this.fullName = this.firstName + ‘ - ‘ + newVal;
        
      
    );
  </script>
  1. 监听路由对象的改变：
<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>
  </div>

  <script>
    var login = Vue.extend(
      template: ‘<h1>登录组件</h1>‘
    );

    var register = Vue.extend(
      template: ‘<h1>注册组件</h1>‘
    );

    var router = new VueRouter(
      routes: [
         path: "/login", component: login ,
         path: "/register", component: register 
      ]
    );

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: ,
      methods: ,
      router: router,
      watch: 
        ‘$route‘: function (newVal, oldVal) 
          if (newVal.path === ‘/login‘) 
            console.log(‘这是登录组件‘);
          
        
      
    );
  </script>

computed计算属性的使用

  1. 默认只有getter的计算属性：
<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>fullName</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: 
        firstName: ‘jack‘,
        lastName: ‘chen‘
      ,
      methods: ,
      computed:  // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
        fullName() 
          return this.firstName + ‘ - ‘ + this.lastName;
        
      
    );
  </script>
  1. 定义有getter和setter的计算属性：
<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>fullName</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue(
      el: ‘#app‘,
      data: 
        firstName: ‘jack‘,
        lastName: ‘chen‘
      ,
      methods: 
        changeName() 
          this.fullName = ‘TOM - chen2‘;
        
      ,
      computed: 
        fullName: 
          get: function () 
            return this.firstName + ‘ - ‘ + this.lastName;
          ,
          set: function (newVal) 
            var parts = newVal.split(‘ - ‘);
            this.firstName = parts[0];
            this.lastName = parts[1];
          
        
      
    );
  </script>

watch、computed和methods之间的对比

  1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  2. methods方法表示一个具体的操作，主要书写业务逻辑；
  3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

nrm的安装使用

作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；
什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；

  1. 运行npm i nrm -g全局安装nrm包；
  2. 使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
  3. 使用nrm use npm或nrm use taobao切换不同的镜像源地址；

vue之路由(代码片段)

Vue之路由**后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；**前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特... 查看详情

vue之二级路由(代码片段)

 　　一样式　　1在一个vue组件,<template></template>中，在加入<router-view></router-view>　　　　<template>　　　　　　<div>　　　　　　　　.......　　　　　　　　<router-view></router-view>　 查看详情

vue项目优化之路由懒加载(代码片段)

path:‘/login‘,name:‘登录页面‘,hidden:true,　　meta:title:‘Readme‘,icon:‘el-icon-menu‘,component:resolve=>require([‘../views/login/Login.vue‘],resolve)  查看详情

vue之vue-roter(代码片段)

路由1.子路由：想要子路由的内容完全显示出来，那么就创建一个空路由，存放router-view，用来显示子理由的。path:‘/news‘,//新闻页面component:NewsN2,//用一个空的路由模板代替。提供<router-viwe>的渲染视图。name:‘NewsN2‘,children... 查看详情

vue开发之基础路由(代码片段)

1.router-link和router-view组件src/App.vie文件内容：<template><divid="app"><divid="nav"><router-linkto="/">Home</router-link>|<router-linkto=" 查看详情

vue之路由常用的几种传参方式(代码片段)

Vue之路由常用的几种传参方式第一种方式第二种方式第三种方式第一种方式必须在路由的path上配置相关参数路由配置（必须）：path:'/details/:id',name:'Details',component:Details传参toDetails(id) this.$router.push(path:`... 查看详情

vue路由元之进入路由需要用户登录权限功能(代码片段)

为什么需要路由元呢？？？　　博猪最近开发刚刚好遇到一个情况，就是有个路由页面里面包含了客户的信息，客户想进这个路由页面的话，就可以通过请求数据获取该信息，但是如果客户没有登录的话，是不能进到该页面的，... 查看详情

vue之vue-router(代码片段)

...编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)//1.定义（路由）组件。//可以从其他文件import进来constFoo=template:‘<div>foo</div>‘constBar=template:‘<div>bar</div>‘//2.定义路由//每个路由应该映 查看详情

vue之vue-router的使用(代码片段)

一、简介　　1、vue-router是vue.js官方的路由管理器，它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。　　2、官方文档：https://router.vuejs.org/zh/。　　3、下载安装：npmivue-router-S(npminstallvue-router--save)。二、配置路由：... 查看详情

vue之路由以及默认路由跳转(代码片段)

vue之路由以及默认路由跳转之前我们将子组件挂载到根组件的时候都是手动挂载的，而路由就是自动的将子组件挂载到根组件中在这里我们需要用到一个路由插件，就是vue-router，vue-router网址：https://router.vuejs.org/zh/guide/既然要用... 查看详情

vue第七天学习笔记之vue-router详解(代码片段)

目录 1.动态路由2.路由懒加载2.1认识路由的懒加载2.2路由懒加载的效果2.3懒加载的方式3.路由嵌套3.1认识嵌套路由3.2嵌套路由实现3.3嵌套默认路径4.传递参数4.1准备工作4.2传递参数的方式4.3传递参数方式一:4.4传递参数方式二:JavaSc... 查看详情

每天一点点之vue框架开发-vue-router路由进阶（路由别名跳转设置默认路由）(代码片段)

路由别名 别名的作用：防止文件路径泄露使用之前显示如下：使用别名后就只会显示到域名，后面的文件是不会显示的，这就起到保护的作用了  在main.js中的路由中添加name来创建别名constroutes=[path:‘/footer‘,name:footer... 查看详情

vue-router之路由钩子（组件内路由钩子必须在路由组件调用，子组件没用）(代码片段)

模式vue-router中的模式选项主要在router实例化的时候进行定义的，如下constrouter=newVueRouter(　　　mode:‘history‘,//两种类型history还有hashroutes:routes//可以缩写成routes) 有两种模式可供选择，history和hash，大致对比一下， 模式... 查看详情

vue开发实例（15）之动态路由(代码片段)

引言Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！即使你并非前端开发人员，对前端的开发流程进行... 查看详情

vue之vue-router(代码片段)

目录简介安装vue-router使用vue-routerrouter的方法路由跳转方法一使用js控制方法二使用标签控制路由跳转携带参数方法一使用问号携带方法二使用斜杠分隔符携带方法三使用对象的方式跳转方法四标签方式跳转携带参数router与route的... 查看详情

vue-router路由vue-cli脚手架和模块化开发之路由的动态跳转(代码片段)

...转是在页面中进行实现的利用vue-router实例方法，使用js对路由进行动态跳转；1、router.push：参数为路由对象，跳转到指定路由，跳转后会产生历史记录；<!--动态跳转的按钮--><div><button@click="push">push返回首页</button... 查看详情

vue学习笔记：26.脚手架vue-cli之路由vue-router(代码片段)

一.网页路由基础讲解1.什么是路由2.后端路由在早期的网页开发中，都是使用后端渲染。常用的计算包括：jsp，php等。后端渲染原理：当使用浏览器访问某个url时，会将该url发送到对应网站的服务器。服务器会... 查看详情

vue路由跳转之当前页面路由跳转并动态改变页面的title(代码片段)

...  然后在保证不跳转到其他页面，在本页面中进行路由跳转，实现title的变更 改之后： 在当前页面就实现了title的动态改变。下边是实现的方法：在点击下一步的时候： 动态添加url并且携带自己改的参数，并... 查看详情