Vue Router基本使用

Vue Router的基本使用步骤：

引入相关库文件

VueRouter引入到Vue类中

定义路由组件规则

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

创建路由实例

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

把路由挂载到Vue根实例中

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

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

// - 引入相关库文件
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种形式：

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

要不要遵循restful规则

遵循

不遵循

命名路由：

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

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

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

路由模式切换

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

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

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