首页静态页面如何使用vue中的$router

静态页面如何使用vue中的$router

时间: 2023-11-27 08:02:31 浏览: 59

对vue2.0中.vue文件页面跳转之.$router.push的用法详解

5星 · 资源好评率100%

vue2.0在使用的过程中， .vue文件之间的跳转，在template中的常见写法是： <router to=/miniCard/statement/horizon> <button class=btn btn-default colorDe>继续</button> </router> 但是有时的需求是页面不直接跳转，有确认弹框或者其他事件，此时就需要在js中设置跳转，常用的一种方法是 .$router.push ，用法如下： this.$router.push({path: '/...'}); 希望本文对您有所帮助！拓展知识：解决this.$rou

静态页面无法使用Vue.js中的$router，因为$router是Vue.js中的路由功能，只有在Vue.js项目中才能使用。但是，您可以通过引入Vue.js库来在静态页面中使用Vue.js，从而使用$router进行页面跳转。以下是一个简单的示例： 1. 在静态页面中引入Vue.js库： ```html <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ``` 2. 创建Vue实例并定义路由： ```html <div id="app"> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> </div> <script> const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> ``` 在上面的示例中，我们创建了两个路由：/home和/about，并将它们映射到组件Home和About。然后，我们创建了一个Vue实例，并将Vue Router实例传递给它。最后，我们将Vue实例挂载到HTML页面中的#app元素上。注意，以上示例中的代码应该放在静态页面中的`<body>`标签中。

阅读全文