Vue-router（一）

Vue-router（一）

路由概念

• 路由：就是将信息从源地址传输到目的地址
• 路由中的映射表：内网IP1：电脑mac地址1（决定路由器接收的信息发给哪个用户）

前端渲染和后端渲染

• 后端渲染：服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。比如：jsp页面

• 好处：前端耗时少，模板统一在后端。前端（相对）省事，不占用客户端运算资源（解析模板）

  • 坏处：占用服务器资源
  • 后端路由（后端处理URL和页面之间的映射关系）

• 前端渲染：后端返回JSON数据，前端利用预先写的html模板，循环读取JSON数据，拼接字符串，并插入页面

  • 好处：网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端，改结构变交互都前端自己来了，改完自己调就行
  • 坏处：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多
  • 前端路由（前端处理URL和页面之间的映射关系）

路由映射配置和呈现

//1.通过Vue.use安装插件
Vue.use(VueRouter)

//2.创建vuerouter对象
//里面放置路由对应的组件在views文件夹下创建.vue文件相应组件
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue')
  }
]

//配置路由和组件之间的应用关系
const router = new VueRouter({
  routes
})

//3.将router对象传入到vue实例
export default router


//在app.vue中写router-link和router-view,因为app是main.js用render函数渲染出来的
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

改变路径的2种方式

• URL的hash
• HTML5的history

默认情况下，路径的改变用的是URL的hash

• 如果要用HTML的history模式的话，进行配置即可

const router=new VueRouter({

	routes,
	mode:'history'
})

router-link的其他几个属性

• 

• 也可以不用router-link改变URL，可以通过$router这个属性修改

<template>
  <div id="app">
    <h2>我是App</h2>
    <button @click="homeClick">首页</button>
     <button @click="aboutClick">关于</button>
  </div>
</template>

<script>
export default {
 name:'App',
  methods:{
    homeClick(){
      this.$router.push('/home')
       //this.$router.replace('/home')也可以，即页面不返回
    },
    aboutClick(){
       this.$router.push('/about')
    }
  }
}
</script>

动态路由

• 例如/后面是用户的ID，这个是动态变化的

 <router-link v-bind:to="'/user/'+userid"></router-link>

export default{
  name:'app',
  data(){
    return{
      userid:'why'
    }
  }
}



//要在页面看到那个动态获取的例如用户ID
computed:{
	userid(){
	return this.$route.params.ID//这个ID是在path和components的对应关系中定义的值
}
}

• $route $router区别
  • $route是当前动态活跃的路由
  • $router是创建的那个new 的VueRouter对象