2021-03-20-vue项目使用vue-router 路由

安装

• vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目
  录，输入下面命令。

npm install vue-router --save-dev

使用

创建组件页面

• 创建一个名为 src/components 的目录专门放置我们开发的 Vue 组件，在 src/components 目录下创建一个名为
  Content.vue 的组件，代码如下：

<template>
<div>
我是内容页
</div>
</template>
<script>
export default {
name: "Content"
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

路由文件

• 创建一个名为 src/router 的目录专门放置我们的路由配置代码，在 src/router 目录下创建一个名为
  index.js 路由配置文件，代码如下：

import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
// 导入上面定义的组件
import Content from '@/components/Content'
// 安装路由
Vue.use(Router);
// 配置路由
export default new Router({
routes: [
{
// 路由路径
path: '/content',
// 路由名称
name: 'Content',
// 跳转到组件
component: Content
}
]
});

配置路由

• 修改 main.js 入口文件，增加配置路由的相关代码

import Vue from 'vue'
import App from './App'
// 导入上面创建的路由配置目录
import router from './router'
Vue.config.productionTip = false;
new Vue({
el: '#app',
// 配置路由
router,
components: { App },
template: '<App/>'
});

使用路由

• 修改 App.vue 组件，代码如下：

<template>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

• 说明：
  router-link： 默认会被渲染成一个<a> 标签， to 属性为指定链接
  router-view： 用于渲染路由匹配到的组件