vue router 解决的问题:
系统运作是每个url都对应一个html文件,每次访问切换url。SPA单页面,都定位到相同的页面,切换url时,不重新加载页面。监听url的变化,在变化前后执行响应的逻辑。
使用的步骤:①提供路由配置表,不同url匹配不同的组件配置
②初始化路由实例 new VueRouter()
③挂载到Vue实例上
④提供路由占位,用来挂载URL匹配到的组件
配置router.js
或
入口文件main.js
但是不要把routes换成别的名字,不然router-view渲染不出来
app.vue
routeone routetwo
另知识点①:把把router-link改成指定的标签(例改成span标签):
<router-link tag="span" ></router-link>
知识点②:路由传参:
配置:
app.vue:
子路由:
知识点③
在<router-link @mouseover="">上我们添加点击事件总是无效的,这是因为<router-link>在HTML5历史记录模式下,router-link将拦截点击事件,以便浏览器不会尝试重新加载页面。
但如果想要添加点击事件怎么办呢? Vue 给出了一种解决办法,在事件上加上修饰符 “.native”,示例如下:
<router-link @mouseover.native="">