vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。 1:创建组件 首先引入vue.js和vue-router.js:
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
然后创建两个组件构造器Home和About:
var Home = Vue.extend({
    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
    data: function() {
        return {
            msg: 'Hello, vue router!'
        }
    }
})

var About = Vue.extend({
    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})
2:创建Router var router = new VueRouter() 调用构造器VueRouter,创建一个路由器实例router。 3:映射路由
router.map({
    '/home': { component: Home },
    '/about': { component: About }
})

调用router的map方法映射路由,每条路由以key-value的形式存在,key是路径,value是组件。
例如:’/home’是一条路由的key,它表示路径;{component: Home}则表示该条路由映射的组件。

4:使用v-link指令

<div class="list-group">
    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    <a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

在a元素上使用v-link指令跳转到指定路径。

5:使用<router-view>标签
<router-view></router-view>
在页面上使用<router-view>标签,它用于渲染匹配的组件。

6:启动路由

var App=Vue.extend({})
router.start(App,'#app')

路由器的运行需要一个根组件,router.start(App,’#App’)表示router会创建一个App实例,并且挂载到#App元素。

注意:使用vue-router的应用,不需要显式的创建Vue实例,而是调用start方法将根组件挂载到某个元素上。

JavaScript
1.创建组件:创建单页面应用需要渲染的组件
2.创建路由:创建VueRouter实例
3.映射路由:调用VueRouter实例的map方法
4.启动路由:调用VueRouter实例的start方法

HTML
1:使用v-link指令
2:使用标签

router.redirect
应用在首次运行时右侧是一片空白,应用通常都会有一个首页,例如:Home页。
使用router.redirect方法将根路径重定向到/home路径:

router.redirect({
    '/': '/home'
})

router.redirect方法用于为路由器定义全局的重定向规则,全局的重定向会在匹配当前路径之前执行。

执行过程
当用户点击v-link指令元素时,我们可以大致猜想一下这中间发生了什么事情:

vue-router首先会去查找v-link指令的路由映射
然后根据路由映射找到匹配的组件
最后将组件渲染到标签

https://blog.csdn.net/CatieCarter/article/details/76178590?locationNum=6&fps=1

Logo

前往低代码交流专区

更多推荐