一,Vue路由
什么是Vue路由?
Vue路由是Vue.js的一部分,是一个官方的Vue.js插件,用于管理单页面应用程序的路由。它允许您在应用程序中使用URL路径和参数来管理不同的页面视图,而无需刷新页面。使用Vue路由,您可以轻松地设置和管理客户端路由,包括嵌套和动态路由。它还提供了一些高级功能,例如路由守卫,用于在页面之间导航或访问受限制的页面时执行额外的逻辑。
核心:
Vue路由的核心是VueRouter实例,它可以通过Vue.js应用程序的组件和路由定义来创建。路由定义包含一组路由规则,每个规则指定URL路径和相应的Vue.js组件。当用户浏览到指定的路径时,Vue路由会根据路由规则找到对应的组件并加载它,从而在应用程序中切换到新的视图。
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
<title>Vue路由</title>
</head>
<body>
<div id="app">
<router-link to="home">首页</router-link>
<router-link to="about">关于</router-link>
<router-view></router-view>
</div>
<Script type="text/javascript">
//定义两个组将
var Home=Vue.extend({
template:'<div>网站首页。。。。</div>'
});
var About=Vue.extend({
template:'<div>网站发展。。。。。。</div>'
});
//2.定义组件与路基对应关系
var routes=[{
component:Home,
path:'/home'
},
{
component:About,
path:'/about'
}];
//3.通过路由关系获取路由对像
var router = new VueRouter({routes});
//4.将路由对象挂载到路由对象
new Vue({
el:'#app',
router,
data(){
return{
msg:'xzs'
}
}
})
</Script>
</body>
</html>
效果:
点击首页
点击关于