创建路由

1.在终端输入npm i vue-router@3.5.4 -S下载路由包。

2.在项目的components文件夹中创建一个你要显示的组件。

文件命名必须为两个单词以上。

内容如下：

<template>
  <div>
    我是路由测试内容
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

3.在项目src目录下创建一个router.js文件。内容如下：

//导入vue模块
import Vue from 'vue'
//导入router模块
import VueRouter from 'vue-router'
// 全局注册
Vue.use(VueRouter)

//导入自定义显示的组件
import UserPage from './components/UserPage'

// 创建路由
const router = new VueRouter({
  mode:'hash',//路由模式
  // 路由规则
  routes:[
    //访问的url，需要显示的组件内容
    {path:'/user',component:UserPage},
  ]
})

export default router

3.在src目录下的main.js入口文件中导入路由模块。

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

Vue.config.productionTip = false

//导入路由
import router from './router'

new Vue({
  render: h => h(App),
  // 挂载路由（属性名与导入名称相同可简写成一个名字）
  router,
}).$mount('#app')

4.在src目录下的app.vue文件中的<template><template>标签中添加<router-view><router-view>视图容器标签。

如没有额外的需要可将原始内容清除，保留基本的标签用于测试。

5.最后打开localhost:8080在网址后面加上你在路由中自定义的/user路径进行访问。

路由链接

1.在app.vue文件中添加<router-link></router-link>路由链接标签。

添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址

注意由于vue文件的template标签只能够有一个根节点标签，需要用div将路由视图和路由链接标签包裹起来。

2.打开localhost:8080就能看到自定义的路由链接，点击跳转到指定的页面。