手把手教你学Vue-3(路由)

laznrbfe 发布于2019-08-22 15:50 / 850人阅读

摘要：记得要通过配置参数注入路由，从而让整个应用都有路由功能动态路由一个路径参数使用冒号标记。当匹配到一个路由时，参数值会被设置到，可以在每个组件内使用。

1.路由的作用

1.当我们有多个页面的时候，我们需要使用路由，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

简单的路由

const routes = [
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount("#app")

动态路由
一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {
  template: "User"
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: "/user/:id", component: User }
  ]
})

潜套路由

const router = new VueRouter({
  routes: [
    { path: "/user/:id", component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的  中
          path: "profile",
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的  中
          path: "posts",
          component: UserPosts
        }
      ]
    }
  ]
})

子节点的router 会渲染到父节点User router-view 里面

router.push、 router.replace 和 router.go
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

router-link :to="{ name: "user", params: { userId: 123 }}">User
router.push({ name: "user", params: { userId: 123 }})

2.命名视图

一个 layout 布局展示






const router = new VueRouter({
  routes: [
    {
      path: "/",
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

命名视图中我们需要注意的地方，在props路由传值上面 对于包含命名视图的路由，你必须分别为每个命名视图添加 props 选项

const User = {
  props: ["id"],
  template: "User {{ id }}"
}
const router = new VueRouter({
  routes: [
    { path: "/user/:id", component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: "/user/:id",
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

3.深入理解路由

路由的配置
declare type RouteConfig = {
  path: string;
  component?: Component;
  name?: string; // 命名路由
  components?: { [name: string]: Component }; // 命名视图组件
  redirect?: string | Location | Function;
  props?: boolean | string | Function;
  alias?: string | Array;
  children?: Array; // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any;

  // 2.6.0+
  caseSensitive?: boolean; // 匹配规则是否大小写敏感？(默认值：false)
  pathToRegexpOptions?: Object; // 编译正则的选项
}

后面实际应用中，在补充一下文档----目前都是看官方文档

云服务器 GPU云服务器手把手教你做图像识别手把手教你阿里云服务器搭建商城 vue-cli3 带你学c带你飞

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93795.html

手把手教你学Vue-3(路由)

摘要：记得要通过配置参数注入路由，从而让整个应用都有路由功能动态路由一个路径参数使用冒号标记。当匹配到一个路由时，参数值会被设置到，可以在每个组件内使用。 1.路由的作用 1.当我们有多个页面的时候，我们需要使用路由，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。简单的路由 const routes = [ { path: ...

Prasanta 2019-08-30 14:17 评论0 收藏0
手把手教你学Vue-3(路由)

摘要：记得要通过配置参数注入路由，从而让整个应用都有路由功能动态路由一个路径参数使用冒号标记。当匹配到一个路由时，参数值会被设置到，可以在每个组件内使用。 1.路由的作用 1.当我们有多个页面的时候，我们需要使用路由，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。简单的路由 const routes = [ { path: ...

SolomonXie 2019-08-02 16:02 评论0 收藏0
手把手教你学Dapr

摘要：配置配置使用概率抽样。采样率定义了对跟踪跨度进行采样的概率，其值可以介于和含之间。例如，以下配置对象将采样率更改为即每个跨度都被采样，并使用协议将跟踪发送到位于的服务器文件路径注将采样率更改为会完全禁用跟踪。目录手把手教你学Dapr - 1. .Net开发者的大时代手把手教你学Dapr - 2. 必须知道的概念手把手教你学Dapr - 3. 使用Dapr运行第一个.Net程序手把手教你学Da...

qqlcbb 2021-11-18 10:07 评论0 收藏0
手把手教你学Vue-2(组件开发)

摘要：组件声明组件分为全局的和局部的。父组件通过给子组件下发数据，子组件通过事件给父组件发送消息。以下实例中子组件已经和它外部完全解耦了。 1.vue 组件-声明组件分为全局的和局部的。全局声明 Vue.component(tagName, options) ** 引用组件 // 注册 Vue.comp...

lansheng228 2019-08-30 14:17 评论0 收藏0
手把手教你学Vue-2(组件开发)

摘要：组件声明组件分为全局的和局部的。父组件通过给子组件下发数据，子组件通过事件给父组件发送消息。以下实例中子组件已经和它外部完全解耦了。 1.vue 组件-声明组件分为全局的和局部的。全局声明 Vue.component(tagName, options) ** 引用组件 // 注册 Vue.comp...

Null 2019-08-22 15:49 评论0 收藏0