在Vue中,路由用于构建单页面应用。它允许我们根据不同的URL路径加载不同的组件,从而实现页面内部的切换和导航。要配置路由,我们需要引入vue-router库,并根据页面需求定义一组路由规则。代码讲解
<div id="app"> <router-link to="/home">主页</router-link> <router-link to="/about">关于</router-link> <router-view></router-view></div><script>const Home = { template: '<div>这是主页</div>' }const About = { template: '<div>这是关于页面</div>' }const routes = [ { path: '/home', component: Home }, { path: '/about', component: About }]const router = new VueRouter({ routes})new Vue({ el: '#app', router})</script>
在上述示例中,我们通过标签创建了两个导航链接,指向主页和关于页面。使用标签来显示当前激活的组件。