Vue之vue-router路由

最新推荐文章于 2024-12-03 07:15:00 发布

原创最新推荐文章于 2024-12-03 07:15:00 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Ping说Vue.js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Vue Router路由，它是Vue.js官方路由管理器，与Vue.js核心深度集成，便于构建单页面应用，具备嵌套路由、模块化配置等功能。还说明了其安装方法，基于vue-cli程序，用npm或cnpm安装。最后给出了测试步骤，包括组件定义、路由配置等。

八、vue-router路由

目录：使用、测试

1.使用

1）说明
Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌，包含的功能有：

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

2）安装
基于第一个vue-cli程序进行测试学习，先查看node_modules中是否存在vue-router。
vue-router是一个插件包，所以还是需要用npm、cnpm来进行安装的。打开命令行工具，进入项目的目录，输入下面命令：

npm install vue-router --save-dev

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

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);

2.测试

1）先删除没有用的东西。
2）components目录下存放自己编写的组件。
3）定义一个Content.vue的组件。

<template>
  <div>
    <h1>内容页</h1>
  </div>
</template>
<script>
  export default {
    name: "Content"
  }
</script>

4）安装路由在src目录下，新建一个文件夹：router，专门存放路由。

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

5）在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/>'
});

6）在App.vue中使用路由。

<template>
  <div id="app">
    <!--
      router-link：默认会被渲染成一个<a>标签，to属性为指定链接
      router-view：用于渲染路由匹配到的组件
    -->
    <router-link to="/">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'App'
  }
</script>
<style>

</style>

7）输入命令，启动服务。