vue-router 路由简单使用

Posted 2021-03-18 ressso

对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。

什么是路由

在web开发中，“route”是指根据url分配到对应的处理程序

• 后端路由
  • 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源，这个对应关系就是后端中的路由
• 前端路由
  • 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
  • 单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；　　

安装 vue-router 

在 vue-cli 的项目目录下cmd运行指令：npm install --save vue-router 或者 npm install vue-router --save-dev （效果一样）

 

配置测试

 1、在项目的 src 目录下新建一个文件夹 router，用来存放路由的配置，在该文件夹下创建一个 index.js 的文件 （你也可以起名叫 main.js，这是 路由的主配置文件）

 

 index.js 中内容如下

//导入 vue，就像使用 jQuery 时需要引入入 jquery-min.js 一样， ‘vue‘ 就是 jquery-min.js
import Vue from ‘vue‘
//导入路由插件
import VueRouter from ‘vue-router‘
//安装路由插件
Vue.use(VueRouter);

//导入 vue 组件
import Hello from ‘../components/HelloWorld.vue‘
import Main from ‘../components/Main.vue‘

// 配置导出路由
export default new VueRouter({
    routes:[
        {
            //路由路径,当访问项目的该路径时，通过路由插件会去访问对应的 component 组件
            path:‘/hello‘,
            //路由 名称
            name:‘helo‘,
            //路由组件
            component:Hello
        },
        {
            path:‘/main‘,
            name:‘main‘,
            component:Main
        }
    ]
});

 

2、在项目文件的 main.js 配置

//就像你要引入 jQuery 一样， ‘vue‘ 就是就是 jquery-min.js
import Vue from ‘vue‘
import App from ‘./App‘
//导入 路由的配置文件
import router from ‘./router/index‘　　//import router 的 router 一定要小写，不要写成 Router，否则会报 can‘t match的报错

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  //注入到根实例中
  router,
  components: { App },
  template: ‘<App/>‘
})

 

3、使用路由

在组件中使用 路由

 <!--
      router-link： 默认会被渲染成一个 <a> 标签，to 属性为指定链接
      router-view： 用于渲染路由匹配到的组件，若没有，将不会显示匹配的到的组件
  -->
    <router-link to="/hello">hello</router-link>
    <router-link to="/main">main</router-link>
    <router-view></router-view>