3.Vue-在Vue框架中搭建路由

题记

        以下是在vue框架中搭建路由的全过程，包括全部代码。

创建路由

        如果你的文件中没有 router文件夹，可以使用以下命令创建：

        vue add router

        注意：生成的路由文件会因为选择的自定义选项不同，而有所差异 

 生成的代码展示

        router文件夹下的index.js代码如下： 

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

import HomeView from '../views/HomeView.vue'

const routes = [

  {

    path: '/',

    name: 'home',

    component: HomeView

  },

  {

    path: '/about',

    name: 'about',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

  }

]

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

         views下的AboutView.vue文件如下：

<template>

  <div class="about">

    <h1>This is an about page</h1>

  </div>

</template>

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

        views下的HelloView.vue文件如下： 

<template>

  <div class="home">

    <img alt="Vue logo" src="../assets/logo.png">

    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

export default {

  name: 'HomeView',

  components: {

    HelloWorld

  }

}

</script>

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

        App.vue文件如下：

<template>

  <!--这部分可以引掉

    <nav>

    <router-link to="/">Home</router-link> |

    <router-link to="/about">About</router-link>

  </nav>-->

  <!--路由出口-->

  <router-view/>

</template>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

nav {

  padding: 30px;

}

nav a {

  font-weight: bold;

  color: #2c3e50;

}

nav a.router-link-exact-active {

  color: #42b983;

}

</style>

<template>
  <!--这部分可以引掉
    <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>-->
  <!--路由出口-->
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

        mian.js文件如下： 

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

createApp(App).use(router).mount('#app')

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

        main.js文件写成下面这样也是可以的： 

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

自定义路由 

        修改router文件夹下的index.js代码如下： 

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

import HomeView from '../views/HomeView.vue'

const routes = [

  {

    path: '/',

    name: 'home',

    component: HomeView

  },

  {

    path: '/about',

    name: 'about',

    component: () => import( '../views/AboutView.vue')

  },

  // 新建一个test路由

  // path指定了路由的路径，即当用户访问该路径时，该路由会被匹配到什么地方。

  // name为该路由指定一个名称，可以在其他地方使用该名称来引用该路由。

  // component：指定了该路由对应的组件。在这个例子中，使用了动态导入的方式来引入一个名为TestView.vue的组件。

  {

    path: '/test',

    name: 'test',

    component: () => import('../views/TestView.vue')

  }

]

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import( '../views/AboutView.vue')
  },

  // 新建一个test路由
  // path指定了路由的路径，即当用户访问该路径时，该路由会被匹配到什么地方。
  // name为该路由指定一个名称，可以在其他地方使用该名称来引用该路由。
  // component：指定了该路由对应的组件。在这个例子中，使用了动态导入的方式来引入一个名为TestView.vue的组件。
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/TestView.vue')
  }

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 自定义Vue组件

        vue文件要符合命名规范，不然会报错，可以写成TestView.vue的形式

        在views文件夹下新增TestView.vue文件： 

<template>

  <div class="test">

    <h1>test</h1>

  </div>

</template>

<template>
  <div class="test">
    <h1>test</h1>
  </div>
</template>

 执行程序

        在终端执行以下命令： 

        npm run serve 

        访问：

        localhost:8080 

展示图 

 后记

        觉得有用可以点赞或收藏！