Vue Router基本使用

发布于 2020-12-29  94 次阅读


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路由


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。