vue-router在组件化编码中,路由的使用步骤

一、在组件化编码中,路由的使用方法

1. 在路由组件文件夹下定义路由组件

  • 和定义普通组件步骤相同

2. 在router.js文件中定义路由匹配规则

  • 首先引入第一步中定义好的组件
    import Home from './views/Home.vue'

    // 第二种引入方法,给 path 绑定组件时导入 ,有什么区别待查正,涉及赖加载
    component: () => import(/* webpackChunkName: "search" */ './views/SearchUser.vue')
  • 制定路由匹配规则
    export default new Router({
          routes: [
            {
                  path: '/',
                  name: 'home',
                  component: Home
            },
         ],
    })

3. 注册路由

  • 在vue实例中注册路由,如果使用vue-cli构建项目,这些工作都已经做好

4. 使用路由

  • 定义路由切换的入口
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  • 设置路由切换的容器
   <router-view></router-view>

    <!-- 给容器指定特定显示的组件 -->
    <router-view name="home"></router-view>

二.路由的一些特殊用法

1.路由嵌套

一个使用了路由的组件中如果还要使用路由,那么就需要使用路由嵌套,比如在根路由下有一个子路由 ‘/login’ , 就需要在 / 路由的匹配规则中加入 children 属性数组,其内容就是定义子路由匹配规则的对象。

    children : [
        {
            path : 'login',
            name : '',
            component : '组件‘
        },
    ]

2.路由重定向

路由重定向也是一条匹配规则,只是需要把 path 对应的 component 换成 redirect : ‘‘ 属性值是目标 path 路径

    routes : [
        {
            path : '/',
            redirect : '/home'
        }
    ]

3.活动态的路由组件

当前所在的路由组件就是处在活动态,这个状态随路由组件的切换而改变,进入活动态的组件标签有一个 router-link-active 属性,非活动态的组件则没有,可以给这个属性赋一个特殊css样式

4.控制路由组件的回退

在Android应用程序的左上角通常会有一个回退箭头,在pc浏览器左上角同样有前进和回退的操作,如果想要把这种回退和前进操作放到应用程序本身里面,而不是用浏览器的回退按钮去操作,特别是在移动端的web应用就有这种需求,就可以使用以下方法:

    // 回退按钮的单机事件绑定函数
    @click = "$router.back()"

    // 前进
    this.$router.go(1)

5. 另外一些切换路由的方式

  • this.$router.push(‘/home/news‘)
    这种方式相当与使用 "router-link to=‘/home/news‘ " , 可以正常回退到上一个显示的组件。
  • this.$router.replace(‘/home/news‘)
    这种方式是把当前所在的组件路由干掉,替换成目标组件的路由,如果回退,不会回到上一次显示的组件

原文地址:https://www.cnblogs.com/peatechen/p/11013296.html

时间: 2024-11-03 20:26:58

vue-router在组件化编码中,路由的使用步骤的相关文章

Vue.js的组件化思想--上

Vue.js的组件化思想--上 一.Vue中的组件 Vue视图层的灵魂 -  组件化 组件(Component)是 Vue.js 最强大的功能之一: 组件可以扩展 HTML 元素,封装可重用的代码: 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 二.全局组件的创建和注册  全局组件-步骤:1.创建组件Vue.extend(),指定组件的名称--2.注册组件Vue.component()--3.

Vue.js的组件化思想--下

Vue.js的组件化思想--下 一.组件间的通信        组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop - 父组件传递数据给子

vuex在组件化开发中的简单应用小例子

首先, 介绍一下vuex是个什么东西, 个人理解来说, vuex就是一个状态管理的东西, 它里面有且仅有一个Store仓库, 这个仓库里面存放着一些变量, 为什么要有这么一个变量呢, 用过vue的人肯定都清除, 父子组件之间的通讯传值是个比较麻烦的事情, 特别是, 嵌套组件特别多的时候, 这种情况下, 一级一级地传递下去十分麻烦, 还有就是兄弟组件之间的传值也一样麻烦. 而vuex中的Store这个仓库, 就能够为我们将放在这个仓库中的值, 分发给整个项目下的所有组件, 也就是说是, 不用一级一

Android适合组件化开发的路由框架:Launch

1.概述 最近越来越不想写代码了,特别是一些重复性的代码,比如由于每次启动一个 Activity,我们都会很习惯的在 Activity 中写下: public static void launch(Activity activity) { Intent intent = new Intent(); intent.setClass(activity, xxxActivity.class); activity.startActivity(); } 已经有两年Android开发经验的我掐指一算,好像有

Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用.其实说是多页面应用,实际上在webpack中属于四个app,  如果真是做纯单页面,那应该有二三十个页面吧.所以我这里的多页面应用,是分为四个SPA.比如微信最下面,有四个导航,微信,通讯录,发现,我. 那么这四个导航,就是我的四个SPA,配置多个入口即可. 在这里就不说太多代码了,项目结构将会放

Vue.js-资料-组件化思想 —上

一.Vue中的组件 Vue视图层的灵魂 -  组件化 组件(Component)是 Vue.js 最强大的功能之一: 组件可以扩展 HTML 元素,封装可重用的代码: 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 二.全局组件的创建和注册 案例代码: 调用Vue.extend()创建的是一个组件构造器,构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML: 调用Vu

Android GreenDao 在组件化项目中的一个问题 - 2018年7月5日21:15:14

组件化项目使用GreenDao时注意的事项: 1.要在组件化中的基础库(domain层)创建实体类: 2.如果sycn之后不能生产Dao文件,先把 module 的build 文件夹删掉,然后 用AS 的Gradle插件重新build项目,如图: build之后就会生成 GreenDao的相关java文件了. 原文地址:https://www.cnblogs.com/jooy/p/9270585.html

vue初谈组件化

组件化的思想在于,将一个app应用的结构认为是一颗组件树,个人认为跟dom树一样,然后将内部的元素分为一个个组件,组件之间可以复用,解耦高,方便组织与管理,可以通过一对标签代表一段html代码. 且组件之间比较独立. 步骤: 1.创建组件 // 全局范围内创造的组件,该组件可以 在多个app实例下使用, const cpn = Vue.extend({ template: `<div><h2>这是一个模板</h2> <p>这是一个标题</p> &

Vue.js的组件化思想 —下

一.组件间的通信          组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop — 父组件传递数据给子组件          pr