当先锋百科网

首页 1 2 3 4 5 6 7

$router是Vue.js中的一个重要属性,它是Vue.js的路由器对象。该对象的作用是实现前端的导航功能,切换不同的页面内容,而不重新加载整个页面。

可以通过在Vue实例中,声明一个路由器对象,并将其绑定到Vue实例上来使用它。这个路由器对象里面包含了一些方法和属性,可以帮助我们实现前端页面路由的目的。

//声明路由器对象
const router = new VueRouter({
routes: [
//路由规则
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
//将路由器对象绑定到Vue实例上
const app = new Vue({
router
}).$mount('#app')

我们在路由规则中定义了两个路由规则,一个是'/'路径,它对应的组件是Home,另一个是'/about'路径,它对应的组件是About。我们在使用路由器的时候,只需要在template模板中编写相应的路由链接和路由视图即可。

在上面的代码中,我们使用了Vue.js官方提供的router-link组件来实现路由链接。它的to属性用来指定跳转路由的路径。同时,我们在template模板中指定了一个标签,这个标签的作用是用来显示路由对应组件的内容。