Vue Router的基本知识

440 10-18

Vue-router的基本使用

讲到这里大家基本的使用应该都会。路由，其实就是指向的意思，当我点击页面上的首页按钮的时候，页面中就是显示首页的内容，如果点击页面上的关于按钮，页面就显示关于的内容。相当于是一种映射，所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。路由模块的本质就是建立起url和页面之间的映射关系。
点击之后，怎么做到正确的对应，比如，当我点击首页按钮，页面中就显示home的内容，这就要在js文件中进行路由的配置

Vue-router两种模式

hash模式：vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

History模式：由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: ‘history’",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

const router=new VueRouter({
	mode:'history',
	routes:[...]
})

mode中的值的区别

mode:'hash’多了 “#”

http://localhost:8080/#/login

mode:‘history’

http://localhost:8080/home

试着测一测吧----->>>点击我！！！

使用路由模块来实现页面跳转的方式

方式1：直接修改地址栏

方式2：this.$router.push(‘路由地址’)

方式3：

<router-link to="路由地址"></router-link>

Vue-router使用的方式

下载

npm install vue-router -S

在main.js中引入

import VueRouter from 'vue-router

安装插件

Vue.use(VueRouter)

创建路由对象并配置路由规则

let router = new VueRouter({
routes:[{path:'/home',component:Home}]
}

将其路由对象传递给Vue的实例，options中加入 router:router

//new Vue启动
new Vue({
el:'#app',
//让vue知道我们的路由规则
router:router,
render:c=>c(App)
})

在vue中使用**<router-view> </router-view**组件占位。

//app.vue中
<template>
    <div>
        <!-- 留坑，非常重要 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return {}
        }
    }
</script>

以上知识你都学懂了吗？赶快来检测一下吧！初级前端面试常考题型

标签： Vue.js