vue-router

最新推荐文章于 2024-04-15 23:34:48 发布

陌上浮屠

最新推荐文章于 2024-04-15 23:34:48 发布

阅读量472

点赞数

分类专栏： VUE

VUE 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

vue router其实质是在HTML5 historyAPI、window.onpopstate、window.onhashchange上（onhashchange 事件在当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发。）做的封装，通过一定的规则映射到对应的方法上，同时通过监听变化，从而实现单页路由。

1：npm安装

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2：简单例子

将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
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" 可以是通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
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')

// 现在，应用已经启动了！

3：动态路由匹配

（1）我们经常需要把某种模式匹配到所有路由，全都映射到同一个组件；例如，我们有一个user组件，对于所有ID各不同的用户，都要使用这个组件来渲染，那么我们可以在vue-router的路由路径中使用[动态路径参数]来达到这个效果

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

/user/foo跟/user/bar都将映射到相同的路由；
一个[路径参数]使用冒号标记，当匹配到一个路由时，参数值会被设置到this.$route.params;可以在每个组件内部使用；

const User={
    template:'<div>{{$route.params.id}}</div>'
}

（2）可以在一个路由中设置多段[路径参数]，对应的值都会设置到$.route.params中

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: ‘evan’ }
/user/:username/post/:post_id	/user/evan/post/123	{username: ‘evan’, post_id: 123 }

（3）响应路由参数的变化
当使用路由参数时，原来的组件实例会被复用，因为2个路由都渲染同一个组件；比起销毁再创建，复用显得更加高效；不过这也意味着组件的生命周期钩子不会再被调用；复用组件时，相对路由参数的变化做出相应的话，你可以简单的watch(监测变化)$route对象

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

4：嵌套路由

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

注意，以/开头的嵌套路径会被当做根路径，这让你充分的使用嵌套组件而无需设置嵌套的路径；

5：编程式的导航

1：router.push(location)

声明式	编程式
< router-link :to=’…’>	router.push(…)

以上2个方法产生的效果是一样的；向history栈添加一个新的记录；所以用户点击浏览器的回退按钮时，返回到的之前的URL；点击< router-link >时，router.push(…)这个方法会在内部调用；该方法的参数可以是一个字符串路径，或者一个描述地址的对象，例如
(params的时候必须用name,不能用path，name名称必须是路由组件名，而且页面刷新以后params会清空)

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

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

//命名的路由(params的时候必须用name,不能用path，name名称必须是路由组件名，而且页面刷新以后params会清空)
router.push({ name:'user' , params:{ userId:123 } })

//带查询参数，变成 /register?plan=private
router.push({ path:'register' , query: { plan:'private' } })

2：router.replace(location)
他不会向history添加新记录，而是替换当前的history记录；

声明式	编程式
< router-link :to=’…’ replace>	router.replace(…)

3：router.go(n)
该方法的参数是一个整数，意思是在history记录中向前或者后退多少步；

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

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

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

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

你也许注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像，实际上它们确实是效仿 window.history API 的。

因此，如果你已经熟悉 Browser History APIs，那么在 vue-router 中操作 history 就是超级简单的。

6：命名路由

创建router实例的时候，在routes配置汇总给某个路由设置名称

const router=new VueRouter({
    routes:[
        path:'/user/:userId',
        name:'user',
        component:User
    ]
})

要连接到一个命名路由，可以给router-link的to属性传一个对象

<router-link :to="{ name:'user' , params:{ userId:123 }}">User</router-link>

跟router.push()是一回事
router.push({ name:’user’ , params:{ userId:123 } })

7：命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，这个时候命名视图就派上用场了。可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口；如果router-view没有设置名字，那么默认为default

<router-view class='view one'></router-view>
<router-view class='view two' name='a'></router-view>
<router-view class='view three' name='b'></router-view>

一个视图使用一个组件渲染，因此对于同一个路由，多个视图就需要多个组件，确保正确的使用components配置

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

8：重定向

当用户访问/a时，URL将会被替换成/b，然后匹配路由为/b；

const router=new VueRouter({
    routes:[
        {
            path:'/a',
            redirect:'/b'
        }
    ]
})

重定向的目标也可以是一个命名的路由

const router-new VueRouter({
    routes:[
        {
            path:'/a',
            redirect:{
                name:'foo'
            }
        }
    ]
})

甚至是一个方法，动态返回重定向目标

const router=new VueRouter({
    routes:[
        {
            path:'/a',
            redirect: to=>{
                //方法接受目标路由作为参数，return重定向的字符串路径/路径对象
            }
        }
    ]
})