vue cli3 路由

vue cli3的路由创建方式

1.在src的文件夹中创建一个文件router.js的文件，这个里面可以专门用来存放路由的

2.在router.js的文件中存放路由，则需要引入两个文件（createRouter,createwebHistory)

import{createRouter,createWebHistory} from "vue-router"

 

3.把你需要连接的文件放入文件中，例如，你需要放入ResourceHome.vue,ResourceNew.vue,则需要下列的方式引入

import ResourceHome from "@/views/ResourceHome.vue";

import ResourceNew from "@/views/ResourceNew.vue";

 

4.做好了文件的引入，则需要下列的方式进行路由的配置

const routes = [

    {path:"/", component:ResourceHome},

    {path:"/new", component:ResourceNew},

]

 

    //创建路由

    const router = createRouter({

        history:createWebHistory(),

        //第一个router是参数，第二个routes是配置路由中的routes,可以只写一个routes

        routes

    });

5.将路由实例暴露出去

// 挂在实例

export default router;

 

 

7.在main.js中将路由进行引入

import router from './router'

 

8.使用路由

app.use(router)

 

9.当你需要进行路由的默认跳转的时候(app.vue或者其他页面)，你则需要进行再根文件中进行设置，去掉你的引入的文件信息，比如你引入的文件名，对应的import文件地址，以及component中的文件名，这三个都需要进行去掉，同时，你需要的将引入的文件名换成特定的路由方式的写法，<router-view></router-view>这对标记不要写错，写错了就会出现问题（当时因为写错了，和其他的.vue文件名很像，没有仔细检查，弄了一上午都没有弄出来，页面路径显示一直不出来，后来反复查找，再加上之前回去angular.js的路由配置，才找出来，如果这一块不懂，或者可以去看看我的angular的路由配置，其实都是一样的，这样跳出来看，会更加明白，清楚，因为当你身在其中，只会陷入死循环）

 

例子:

<template>

  <!-- <ResourceHome></ResourceHome>

  <ResourceNew></ResourceNew> -->

   <router-view></router-view>

</template>

<script>

  // import  ResourceHome from "./views/ResourceHome.vue"

export default {

  name: 'App',

  components: {

    //  ResourceHome

  }

}

</script>

<style>

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css"

</style>