Vue Router基本使用

Vue Router的基本使用步骤：

引入相关库文件

后期在项目中以index命名的文件在引入时，可以省去文件名不写。

VueRouter引入到Vue类中

定义路由组件规则

在import的时候如果涉及到了路径，建议写@符号开头的路径（@表示src目录，这个操作是打包工具已经帮我们定义好了，vue-cli的功劳，后续webpack再去说明）

创建路由实例

在创建路由实例的时候要去其属性名必须是routes

把路由挂载到Vue根实例中

在挂载路由实例到根实例的时候要求属性名必须是router

添加路由组件渲染容器（router-view）到对应组件中（占坑）

router/index.jsmain.jsAPP.vueHello.vue

// - 引入相关库文件
import Vue from "vue";
import VueRouter from "vue-router";

// - VueRouter引入到Vue类中
Vue.use(VueRouter);
// - 定义路由组件规则
import Hello from "@/views/Hello";
import News from "@/views/News";

const routes = [
    { path: "/hello", component: Hello },
    { path: "/news", component: News },
];

// - 创建路由实例
const router = new VueRouter({
    routes,
});

// - 导出路由实例
export default router;

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 导入路由
import router from "@/router/index";

new Vue({
    // 此处的属性名称必须是小写的router
    router,
    render: (h) => h(App),
}).$mount("#app");

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name: 'App',
        components: {
        }
    }
</script>

<template>
    <div>
        这是hello组件
    </div>
</template>

可选路由：

在实际开发的时候会有可能需要传参也可能不需要传参的情况，这个时候需要用到`可选路由参数`点。

定义可选路由参数的方式很简单，只需要在原有的路由参数声明位置后面加上个`?`即可。例如：

{ path: "showdetail/:id?", component: ShowDetail },

目前地址栏传递参数已经支持2种形式：

查询字符串，也就是“?”传参形式

动态路由参数，也就是“/user/:id”形式

后续开发的时候如何选择？

要不要遵循restful规则

遵循

请求需要使用动态路由参数形式

GET：/user/100

PUT：/user/100

DELETE：/user/100

不遵循

看你领导心情

看你心情

看后端

命名路由：

命名路由：路由别名，顾名思义就是给路由起名字（外号）。

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。

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

路由模式切换

vue-router中默认使用的是hash模式的路由，也就是前面介绍的地址栏中URL带有“#”的形式，如果需要切换成history模式，则可以在创建路由实例时进行指定，指定的配置项为mode，可选值：

hash：默认，设置路由模式为hash路由

history：设置路由模式为history路由