Vue路由——vue-router

目录

  • 前端路由与后端路由
    • 路由
      • 后端路由
      • 前端路由
  • vue-router
    • 路由
    • vue-router基本用法

前端路由与后端路由

路由

路由(routing):指从源到目的地时,决定端到端路径的决策过程。

路由分为两大类:前端路由和后端路由。

后端路由

后端路由是指:请求方式请求地址function处理函数之间的对应关系。

例如在node.jszhong ,express路由的基本用法如下:

const express=require('express');
const router=express.Router()

router.get('/login',function(req,res){ 路由的处理函数 })
router.post('/form',function(req,res){ 路由的处理函数 })

module.exports=router

前端路由

SPA:指一个web网站只有唯一一个HTML页面,所有组件的展示与切换都在这唯一的一个页面内完成。此时,不同组件之间的切换需要通过前端路由来实现。

前端路由Hash地址与组件之间的对应关系。

前端路由的工作方式

  • 用户点击页面上的路由链接
  • 导致URL地址栏中的Hash值发生变化
  • 前端路由监听到Hash地址的变化
  • 前端路由把当前Hash地址对应的组件渲染到浏览器中

vue-router

vue-router是vue官方给出的路由解决方案。它只能结合vue项目进行使用,能够轻松的管理SPA项目中组件的切换。

对于VueRouter而言,路由就是根据一个请求路径选中一个组件进行渲染的决策过程。

路由

(1)相关概念:

  • router:路由器
  • routes:路由表
  • route:路由

(2)VueRouter的三个主要组成部分:

路由过程:router-link---->VueRouter---->router-view

Vue路由——vue-router_第1张图片

vue-router基本用法

(1)安装vue-router

npm install vue-router

(2)创建路由实例

路由器完全依赖于路由表来分发路由请求,因此创建路由器实例时,需要使用routes配置项来声明请求路径(path)和组件(component)的对应关系。

const router=new VueRouter({
	routes:[
		{path:'/',component:Home},
		{path:'/about',component:About}
	]
})

当请求路径/时,路由器将选中组件Home;当请求路径/about时,路由器将选中组件About。

(3)向Vue实例注入路由器

如果在一个Vue实例的模板中需要使用router-link和router-view组件,需要首先向这个Vue实例注入路由器对象,因为这两个组件都依赖于路由器对象:
Vue路由——vue-router_第2张图片
在创建Vue实例时,使用router配置项将路由器对象注入Vue实例的$router属性。

const myrouter=new VueRoutre({})
const vm=new Vue({router:myrouter})
console.log(vm.$router)   //打印 输出router

(4)声明路由出口

在模板中,使用标签声明路由视图元素。

声明一个路由视图:

<router-view><router-view>

(5)声明路由请求接口
使用标签声明路由链接元素。

<router-link to='/about'>About<router-link>  //声明了一个目标路径为/about的路由链接

该模板对应于DOM结构:

<a href="...">Abouta>

Vue路由——vue-router_第3张图片
例子:实现单页面简单的路由跳转切换页面

(1)两个页面组件:

Home组件(首页):

<template>
  <div>
    <h3>{{title}}h3>
    <ul class="home">
      <li v-for="(item,index) in homeList" :key="index">{{item}}li>
    ul>
  div>
template>
<script>
export default {
  name: "Home",
  data(){
    return {
      title:'我是首页',
      homeList:[
          '简介',
          '特色',
          '功能'
      ]
    }
  }
}
script>
<style scoped>
  .home li{
    display: block;
    list-style-position: inside;
  }
style>

Func组件(功能页面):

<template>
  <div>
    <h3>{{title}}h3>
    <ul class="func">
      <li v-for="(item,index) in funcList" :key="index">{{item}}li>
    ul>
  div>
template>

<script>
export default {
  name: "Func",
  data(){
    return {
      title:'我是功能',
      funcList:[
          '功能1',
          '功能2',
          '功能3'
      ]
    }
  }
}
script>

<style scoped>
  .func li{
    display: block;
    list-style-position: inside;
  }
style>

(2)路由(新建router文件夹)

建立路由表(routerConfig.js):

Vue路由——vue-router_第4张图片
建立路由器(index.js):
Vue路由——vue-router_第5张图片

//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)

(3)声明路由出口以及路由请求接口(App.vue)

<template>
  <div id="app">
    <div>
      <router-link to="/" tag="li" active-class="active">首页router-link>
         
      <router-link to="/func" tag="li" active-class="active">功能router-link>
    div>
    <div>
      <router-view>router-view>    //路由出口
    div>
  div>
template>
<script>
export default {
  name: 'App',
  components: {
  }
}
script>
<style>
li{
  display: inline-block;
  list-style-position: inside;
  cursor: pointer;
}
style>

(4)入口文件导入路由器(main.js)
Vue路由——vue-router_第6张图片
效果:

Vue路由——vue-router_第7张图片

你可能感兴趣的:(Vue,vue.js,前端,javascript)