在配置路由之前，我们需要把路由导入进来，才可以使用，每个url映射是一个对象
export default new Router({ //创建路由对象，并且导出
linkActiveClass:"active1",//统一修改选中的class名字
mode:"history",//去掉url中的#号
routes: [ {
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path: '/name',
name: 'Namevue',
component: Namevue
},]})
path：是配置url路径，根据这个配置参数显示相应的组件
name：name有三种作用①：绑定router-view ，这样组件就显示到对应的view中
在app.vuewenj
<router-link to="/home" tag="li" replace> 首页 <router-link>
to：跳转的url路径
tag：routerlink默认是a标签，可以使用tag指定标签
replace: 调用使用history.replaceState命令，此命令浏览器没有退回
active-class：修改选中class名字
在方法中使用rouer属性，元素绑定方法后，点击元素调用方法跳转
this.$router.push('/home') //修改url路径
this.$router.replace('/home') //修改url路径
动态路由
动态路由需要使用在to属性上拼接变量，但是需要想在属性上使用变量，我们需要使用v-blind绑定to属性
<router-link :to=" '/name'+list "></router-link> 同时需要在路由的配置文件中增加一个属性path:"/name/:id" 这样就可以实现，并且可以使用$route拿到当前url的参数（注意$route和router的差别）
网友评论