vue-router是Vue.js官方提供的一套专用的路由工具库
安装命令如下
vue-router 实例是一个Vue插件,我们需要在Vue全局引用中通过Vue.use() 将它接入到Vue实例中。
在我们的工程中,,main.js是默认的程序入口文件,所有的全局配置都会在这个文件中进行。
我们在main.js中加入如下引用
这样就完成了 vue-router最基本的安装工作了。
接下来我们要实现的功能描述如下
首先我们在 src 目录下建立两个组件文件: Cart.vue Me.vue
购物车
然后我们看to ="/cart"这个里面的路径其实已经在{path:'/cart',component:Cart}
定义过了,如果需要修改,就得需要这两个地方同时修改(如果有其他地方用的就改动的更多)
那么直接将{path:'/cart',component:Cart}
中的路径取出来岂不是很好。
这个时候我们的 vue-router提供了一种隐式的路由引用方式,称之为 —— 命名路由
简单来说就是通过路由的名称引用来取代Url
于是VueRouter的配置代码改为如下:
页面组件与path指令的路由关联
{name:'cart',path:'/cart',{name:'me',path:'/me',component:Me}
]
})
这样我们在
的to属性使用v-bind绑定到Vue实例中,然后通过名称直接得到Url了