【VueRouter】学习

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/pages/HelloWorld‘//导入组件或视图页面
import PageTest from ‘@/pages/PageTest‘
import Test2 from ‘@/pages/Test2‘

Vue.use(Router)

export default new Router({
  mode:‘history‘,
  routes: [
    {
      path: ‘/‘,//地址
      name: ‘HelloWorld‘,//命名
      component: HelloWorld,//组件名称

    },
    {
      path: ‘/HelloWorld‘,
      name: ‘HelloWorld‘,
      component: HelloWorld,
      children: [//添加子目录，父级页面中定义<router-view></router-view>，可将子目录的内容同时渲染
        {
          path: ‘test2‘,
          component: Test2
        }
      ]
    },
    {
      path: ‘/test‘,
      name: ‘PageTest‘,
      component: PageTest
    },
    {
      path: ‘/test/:id‘,//:id 使用params调用传入的参数，而？后的使用query调用
      name: ‘PageTestID‘,
      component: PageTest
    },
    //别名
    { path: ‘/abc‘, redirect: { name: ‘PageTest‘ } }
  ]
})　　

//跳转
// 字符串
router.push(‘home‘)

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

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

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

//此跳转页面会出现短暂空白
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

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

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

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

//跳转链接
<router-link :to="{ name: ‘user‘, params: { userId: 123 }}">User</router-link>