Vue路由

Posted 2021-10-07 行则将至

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue路由相关的知识，希望对你有一定的参考价值。

vueRouter基本使用

1.安装vue-router

npm install vue-router --save-dev
-dev表示安装到开发环境下，开发环境下用到许多依赖，项目发布只需要Vue

2.创建组件（/components/Content.vue）

创建一个Content组件，并用export把自己暴露出去，供其他页面调用

<template>
  <h5>我是内容页</h5>
</template>
<script>
export default {
  name: "Content"
}
</script>
<style scoped>
</style>

3.配置路由（/router/index.js）

此时暴露的组件Content就可以使用了，直接引入

import Vue from \'vue\';
import VueRouter from \'vue-router\';
import Content from "../components/Content";

Vue.use(VueRouter);

export default new VueRouter({
  routes:[
    {
      //路由地址
      path:\'/home\',
      //路由名称。一般和地址相同
      name:\'content\',
      //跳转的组件
      component:Content
    }
  ]
})

4.主函数使用（main.js）

import Vue from \'vue\'
import App from \'./App\'
//引入VueRouter
import VueRouter from \'vue-router\';
import router from \'./router\'
Vue.config.productionTip = false
//使用VueRouter
Vue.use(VueRouter);
/* eslint-disable no-new */
new Vue({
  el: \'#app\',
  router,//使用
  components: { App },
  template: \'<App/>\'
})

5.指定路由位置（App.vue）

指定<router-view></router-view>标签即可

<template>
  <div id="app">
    <img 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>