Vue路由详解-白红宇

Vue路由详解

阅读量：4086 次

发布时间：2019-05-25

本文共 4195 字，大约阅读时间需要 13 分钟。

对于前端来说，其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说，浏览器和超级连接的跳转方式已经不能适用，
所以各大框架纷纷给出了单页面应用的解决路由跳转的方案。

Vue框架的兼容性非常好，可以很好的跟其他第三方的路由框架进行结合。当然官方也给出了路由的方案： vue-router;
建议还是用官方的最好，使用量也是最大，相对来说Vue框架的升级路由组件升级也会及时跟上，所以为了以后的维护和升级方便还是使用Vue自家的东西最好。

Vue-router的版本对应

注意: vue-router@2.x 只适用于 Vue 2.x 版本。
vue-router@1.x 对应于Vue1.x版本。

的Github地址：

vue-router的安装使用

CDN连接方式

https://unpkg.com/vue-router/dist/vue-router.js

npm 安装

npm install vue-router

vue-router 入门demo

vue-router开发的步骤：

第一步：引入vue和vue-router包。

可以使用cdn的方式或者npm的方式。如果配合npm和webpack的话可以直接作为一个模块导入即可。但是作为初学入门的话建议还是
直接使用cdn包的形式，先学会怎么用路由。

第二步：定义路由跳转的组件

// 1. 定义（路由）组件。const Foo = { template: '
     
      foo
     
' }const Bar = { template: '
     
      bar
     
' }

第三步：定义路由规则对象

// 每个路由path应该映射一个组件。 其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器，// 或者，只是一个组件配置对象。const routes = [  { path: '/foo', component: Foo },  { path: '/bar', component: Bar }]// 创建路由对象const router = new VueRouter({  routes // （缩写）相当于 routes: routes，es6的新语法})

第四步：创建Vue对象，并加重上面创建的路由对象

// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能const app = new Vue({  router}).$mount('#app')

第五步：在模板中编写路由跳转链接

最终的代码：

使用vue-router的综合实例

下面是一个综合的例子, 页面上有几个导航的按钮，然后通过点击不同的按钮，可以在当前页面切换不同的组件。

   
     Vue入门之extend全局方法        
       
     
        
    
      
    email to: {
   { email }}

路由参数获取

定义路由路径的时候，可以指定参数。参数需要通过路径进行标识：/user/:id就是定义了一个规则，/user开头，然后后面的就是id参数的值。
比如：

路由规则：  /user/:id/user/9   =>  id = 9/user/8   =>  id = 8/user/1   =>  id = 1

然后在跳转后的vue中可以通过this.$route.params.参数名获取对应的参数。
比如代码：

  
     Vue入门之extend全局方法      
       
          
     
      用户
           
     
      学生

js控制路由跳转

上面我们演示的都是通过router-link进行跳转。其实我们还可以通过js编程的方式进行路由的跳转。

// 当前路由的view跳转到 /homerouter.push('home')// 对象,  跳转到/homerouter.push({ path: 'home' })// 命名的路由   router.push({ name: 'user', params: { userId: 123 }})// 带查询参数，变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})

嵌套路由

嵌套路由跟普通路由基本没有什么区别。但是可以让vue开发变的非常灵活。
官网这块写的也非常好，我就直接拷贝了（原谅我吧。）
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                     /user/foo/posts+------------------+                  +-----------------+| User             |                  | User            || +--------------+ |                  | +-------------+ || | Profile      | |  +------------>  | | Posts       | || |              | |                  | |             | || +--------------+ |                  | +-------------+ |+------------------+                  +-----------------+借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。


     
    
   
const User = {  template: '
   
    User {
   { $route.params.id }}
   
'}const router = new VueRouter({  routes: [    { path: '/user/:id', component: User }  ]})这里的 
   
     是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 
    
     。例如，在 User 组件的模板添加一个 
     
      ：const User = {  template: `    
            
       User {
   { $route.params.id }}
      
           
      
  `}要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：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        }      ]    }  ]})

要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。
你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个空的子路由：

const router = new VueRouter({  routes: [    {      path: '/user/:id', component: User,      children: [        // 当 /user/:id 匹配成功，        // UserHome 会被渲染在 User 的 
   
     中        { path: '', component: UserHome },        // ...其他子路由      ]    }  ]})

总结

其实作为入门的话，暂时先掌握这些知识，后续

转载地址：http://bneni.baihongyu.com/

你可能感兴趣的文章