zoukankan      html  css  js  c++  java
  • 有关vue中路由的理解

     vue是组件、模块设置,那么思考如何将这些组件、模块连在一起呢,Vue Router就起到了一个这个作用,整个过程可以理解成组件怎么引入、怎么连接在一起、怎么渲染到页面中

    首先vue Router中有关   

     <router-link to="/foo">Go to Foo</router-link>   
    router-link标签是导航 通过属性to指定跳转到地址(注意:它除了有to属性外还有其他好用的属性哦!可以参考API文档
    默认会渲染成一个a便签,
    然后通过
    <router-view></router-view> 组件会渲染到这里

    官网的实例:(方便理解吧)

    HTML

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
    

    #JavaScript

    // 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
    
    // 1. 定义 (路由) 组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    (我的项目中
    {
    path: "/auth",
    name: "auth",
    component: resolve => require(["../views/auth/auth.vue"], resolve)//这里要根据自己实际项目去配置
    },
    // 通过 Vue.extend() 创建的组件构造器,
    // 或者,只是一个组件配置对象。 
    // 我们晚点再讨论嵌套路由。
     const routes = [ 

       { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

        有关routes配置的项目如下
        •     类型: Array<RouteConfig>

            path: string,//路径
            component: Component,//组件
            name: string, // 命名路由
            components: { [name: string]: Component }, // 命名视图组件
            redirect: string | Location | Function,//重定向
            props: boolean | Object | Function,//状态传值
            alias: string | Array<string>,
            children: Array<RouteConfig>, // 嵌套路由
            beforeEnter: (to: Route, from: Route, next: Function) => void,
            meta: any,//这里可以是对象,用来自定义属性
          
            // 2.6.0+
            caseSensitive?: boolean, // 匹配规则是否大小写敏感?(默认值:false)
            pathToRegexpOptions?: Object // 编译正则的选项
     
     // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。
     const router = new VueRouter(

      { routes // (缩写) 相当于 routes: routes }

    )
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由,
    // 从而让整个应用都有路由功能 
    这部分一般会写在项目中的main.js文件中
    const app = new Vue(
    { router }
    ).$mount('#app')

    // 现在,应用已经启动了!


    下面是如何在单页面中访问到路由的信息

    通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由:

    // Home.vue
    export default {
      computed: {
        username() {
          // 我们很快就会看到 `params` 是什么
          return this.$route.params.username
        }
      },
      methods: {
        goBack() {
          window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
        }
      }
    }
    

    该文档通篇都常使用 router 实例。留意一下 this.$router 和 router 使用起来完全一样。我们使用this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。

     

     
  • 相关阅读:
    Java实现 LeetCode 50 Pow(x,n)
    Java实现 LeetCode 50 Pow(x,n)
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 47 全排列 II(二)
    Java实现 LeetCode 47 全排列 II(二)
  • 原文地址:https://www.cnblogs.com/whdaichengxu/p/13426927.html
Copyright © 2011-2022 走看看