vue-router的使用

1.vue-router,实现页面跳转的功能

2.进入项目目录mock-demo下安装：

npm install vue-router --save-dev

其中 --save-dev的命令的意思是将组件安装在 package.json 中的“devDependencies”中

 

3.安装完成后，也可以发现在 “node_modules”文件夹下多了个“vue-router”文件夹，即为安装的vue-router依赖包

4.vue-router的使用

1.在项目目录下的src路径下的main.js中引入：

import VueRouter from 'vue-router'  //导入vue-router为VueRouter

Vue.use(VueRouter); //使用VueRouter


2.在src目录下新建一个router文件夹
3.在router文件夹下创建index.js
4.index.js的内容：

5.需要在src文件夹下的components文件下新建一个Content.vue的组件

Content.vue的内容：

<template>
    <div>
        我是内容页
    </div>
</template>

<script>
    //通过export，将组件暴露出去，给别的模块使用
    export default {
        name: "Content.vue"  //组件的名字
    }
</script>

<style scoped>

</style>

6.在router文件夹下index.js的内容：

 

import Vue from 'vue'   //导入vue
import Router from 'vue-router'  //导入vue-router为Router

import Content from '../components/Content'   //引入组件Content.vue为Content

Vue.use(Router);  //Vue中使用Router

//通过export导出，可以让其他模块使用
export default new Router({
    routers:[{   //导出一个routers数组，数组里有多个对象
        path:'/content', //路由跳转路径
        name:'Content',   //路由的名称，一般和组件的名字一样
        component:Content,  //路由跳转的组件
    }]
})

7.在主函数中将路由router文件夹下index.js也导入，最终main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'  //导入vue-router为VueRouter
import router from './router'  //导入./router,会自动将./router下的index.js导入

Vue.use(VueRouter); //使用VueRouter

Vue.config.productionTip = false

new Vue({

  render: h => h(App),
}).$mount('#app',
    router //使用router
)

8.配置好路由之后，要把路由放到一个指定位置

9.在App.vue中使用router-view,App.vue内容：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <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>

10.重新启动项目：

npm run build

npm run serve

11.查看即可

12.<router-link to="/">首页</router-link>   :其中router-link就相当与一个a标签