资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Vue路由

Vue路由

church / 1490人阅读

摘要：定义路由创建实例，然后传配置创建和挂载根实例。有多种方式可以在路由导航发生时执行钩子全局的单个路由独享的或者组件级的。例如，根据上面的路由配置，这个将会匹配父路由记录以及子路由记录。因此，我们需要遍历来检查路由记录中的字段。

Vue-router(路由) 安装 CDN引入(非打包)：
NPM安装(打包)： 
npm install vue-router
开始使用 
在使用Vue.js的时候，我们通过组合组件来组成应用程序，现在我们要把vue-router添加进来，只需要将组件（components）映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
div id="app">
    
Hello App!

    

        
        
        
        Go to Home
        Go to Foo
        Go to Bar
动态路由 
例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：
div id="app">
    
Hello App!

    

        Go to Foo

        Go to Bar

        user
嵌套路由 
借助 vue-router，使用嵌套路由配置，就可以很简单地表达组件中的层级关系


实际上，在上面的动态路由的例子中就已经使用了嵌套了，定义路由时添加一个　children 属性即可：


const routes=[
    {
        path:"/user",
        component:User,
        children:[
            {
                path:":name",
                component:{
                    template:"
pureview
"
                }
            }
        ]
    }
]
编程式导航 
除了使用  创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location) 
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

等同于调用 router.push(...)。

// 字符串
router.push("home")

// 对象
router.push({ path: "home" })

// 命名的路由
router.push({ name: "user", params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})
router.replace(location) 
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n) 
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
命名路由 
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
const router = new VueRouter({
  routes: [
    {
      path: "/user/:userId",
      name: "user",
      component: User
    }
  ]
})  
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
User
命名视图 
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个多带带命名的视图，而不是只有一个多带带的出口。如果 router-view 没有设置名字，那么默认为 default。  一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：

  
var routes=[
            
    components:{
        a:{template:"
首页,...
"},
        b:{template:"
内容部分。。。。
"},
    }


];
重定向别名 
重定向的意思就是当你访问 a 的时候，url 会被替换为 b ，于是匹配路由 b
重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
var router=new VueRouter({
    routes:[
        {
            path:"/a",
            redirect:"/b"
        }
    ]
})  
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
进阶 导航钩子 
vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。


你可以使用 router.beforeEach 注册一个全局的 before 钩子：


router .beforeEach((to,from,next)=>{
    //...
})

钩子函数的三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

ext(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next("/") 或者 next({ path: " / " }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

做了一个简单的页面，设定了一个登陆状态，如果 isLogin 为false，那么点击账户中心，则跳转到登陆页进行登陆


    首页
    关于我们
    登录
    账户中心
    密码管理
路由元信息 
定义路由的时候可以配置 meta 字段：
const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      children: [
        {
          path: "bar",
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何访问这个 meta 字段呢？

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录。

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象（还有在导航钩子中的 route 对象）的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航钩子中检查 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 此路由需要验证，检查是否登录
    // 如果不需要，则重定向到登录页面。
    if (!auth.loggedIn()) {
      next({
        path: "/login",
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})
服务器托管 海外云主机 Vue_Vue Vue vue3 学习笔记 (五)——vue3 _vue

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

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

相关文章

  • 【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。 系列目录地址 一、基础知识概览 第一章 - 一些基础概念（posted at 2018-10-31） 第二章 - 常见的指令的使用（posted at 2018-11-01） 第三章 - 事件修饰符的使用（posted at 2018-11-02） 第四章 - 页面元素样式的设定（posted a...

    cpupro 评论0 收藏0

  • 服务端预渲染之Nuxt(路由篇)

    摘要：前面既然说到了会把文件夹下面的所有文件编译成路由，那么子路由需要使用文件夹嵌套才行。客户端首次访问的页面会在服务端做输出，一旦渲染完成之后，则不会再在服务端输出，则会一直在客户端进行输出了。 服务端预渲染之Nuxt - 使用 现在大多数开发都是基于Vue或者React开发的，能够达到快速开发的效果，也有一些不足的地方,Nuxt能够在服务端做出渲染，然后让搜索引擎在爬取数据的时候能够读到...

    yuanxin 评论0 收藏0

  • 从头开始学习vue-router

    摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。 一、前言 要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

    tommego 评论0 收藏0

  • 从头开始学习vue-router

    摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。 一、前言 要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

    jhhfft 评论0 收藏0

  • 从头开始学习vue-router

    摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。 一、前言 要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

    frontoldman 评论0 收藏0

  • 使用 webpack 插件自动生成 vue 路由文件

    摘要：从长远来看，使用插件自动生成路由是具有一定好处的。现在使用插件来自动生成路由后，就无需再关心和维护这些路由文件了。 一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在项目中试点成功了，现在在项目中已经不需要再维护路由配置文件了，由插件自动生成，节省了大家维护路由的时间。 从长远来看，使用插件自动生成路由是具有一定好处的。当项目中...

    kviccn 评论0 收藏0

发表评论

登陆后可评论

0条评论

church

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<