vue路由vue-router快速入手

路由是vue进行“页面跳转”的实现方式，而vue-router是vue的一个路由组件。
https://router.vuejs.org/zh/guide/
主要包含了一个router.js文件可以在src中建立也可在src中建router包并在包中创建index.js文件内容相同，只是大家的项目文件结构不同。
<router-link to="">lalalal</router-link>标签，渲染为<a>标签用于触发路由
<router-view></router-view>路由的器皿，用于存放路由跳转后需要显示的内容
js跳转方法
this.$router.go(-1)//向前退一步
this.$router.push('/XXXX')//跳转至

router.js

//引入vue与vue-router
import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
import home from "./components/home.vue";

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
    {
        path:"/home",
        component: home
    },
]

var router =  new VueRouter({
    routes
})
export default router;

一、动态路由

路由包含信息，因此为动态的如下代码中：id参数名
<router-link :to='/user/232'>传入id
在跳转到的页面通过{{$router.params.id}}获取id如<p>{{$router.params.id}}</p>

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

二、嵌套路由

父子路由形成树状结构，利于管理与查找
注意在子路由path中没有/
在引用子路由时<router-link to="/about/about2">lalalal</router-link>在：to地址为父路由地址加子路由地址

const routes = [
    {
        path: "/about",
        component: about,
        abouts: [{
            path: "about1",
            component: about1
        }, {
            path: "about2",
            component: about2
        }]
    }
]

三、编程式路由

js的方式控制路由
// 字符串
router.push('home')

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

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

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
push参数的方式
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123

四、命名路由

给每个路由起名字在引用的时候使用name进行引用
引用
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

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