首页 > 其他分享> 文章详细

vue-router 路由

2021-07-11 04:00:23 阅读：173 来源： 互联网

标签：vue Vue VueRouter import router 路由

说明

学习的时候，尽量打开官方文档。

Vue Router 是 Vue.js 官方的路由管理器，他和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过度系统的视图过度效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

安装

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

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确的安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

测试

测试基于：https://www.cnblogs.com/kaisheng-reflect/p/14994142.html 中的 my-vue 项目

先删除没有用的东西，如 assets 下的 logo 、hello.vue、hello.js
components 目录下存放我们自己编写的组件

定义一个 Content.vue 组件

<template>
  <h1>内容页</h1>
</template>

<script>
  export default {
    name: "Content"
  }
</script>

<style scoped>

</style>

安装路由，在 src 目录下新建一个文件夹 router ，专门存放路由。在 router 文件夹下新建index.js 作为路由入口。

import Vue from 'vue'
//导入路由插件
import VueRouter from "vue-router";

//导入自定义组件
import Content from "../components/Content";
import Main from "../components/Main";

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      name: 'content',
      path: '/content',
      component: Content
    },
    {
      name: 'main',
      path: '/main',
      component: Main
    }
  ]
});

在 main.js 中配置路由

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

//导入路由配置目录
import router from './router' //自动扫描里面的路由配置

//用来关闭生产模式下给出的提示
Vue.config.productionTip = false

//显式声明使用 VueRouter
new Vue({
  el: '#app',
  router, //配置路由
  components: {App},
  template: '<App/>'
})

在 App.vue中使用路由。

<template>
  <div id="app">
    <H1>Vue-router</H1>
    <router-link to="/main">首页</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>

标签：vue,Vue,VueRouter,import,router,路由
来源： https://www.cnblogs.com/kaisheng-reflect/p/14995518.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-router 路由

说明

安装

测试