vue router的基本使用和配置教程
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about按钮，页面中就要显示about的内容。Home按钮 =>home内容，about按钮=>about内容，也可以说是一种映射.所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。
点击之后，怎么做到正确的对应，比如，我点击home按钮，页面中怎么就正好能显示home的内容。这就要在js文件中配置路由。
1.在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件默认设置如下：
importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router/index.js'//引入路由
Vue.config.productionTip=false
/*eslint-disableno-new*/
newVue({
el:'#app',
router,//在挂载点中注入vue
components:{App},
template:'
2.自定义配置路由路径，在src下router/index.js文件中配置路由路径
importVuefrom'vue'
importRouterfrom'vue-router'//引入vue-router
//引入要跳转的vue组件
importManagefrom'@/page/admin/Manage'
importuserListfrom'@/page/admin/userList'
importaddUserfrom'@/page/admin/addUser'
importshopListfrom'@/page/admin/shopList'
importaddShopfrom'@/page/admin/addShop'
Vue.use(Router)//在vue中注入Router
//配置路由路径
constroutes=[
{
path:'/',
name:'Login',
component:Login//需要跳转的组件
},
{
path:'/Manage',
name:'Manage',
component:Manage,
children:[{
path:'/userList',
component:userList,
meta:['数据管理','用户列表']
},
{
path:'/shopList',
component:shopList,
meta:['数据管理','商品列表']
},
{
path:'/addUser',
component:addUser,
meta:['添加数据','添加用户']
},
{
path:'/addShop',
component:addShop,
meta:['添加数据','添加商品']
}
]
},
{
path:'/home',
name:'Home',
component:Home
},
{
path:'/helloworld',
name:'Home',
component:HelloWorld
}
]
//将路径注入到Router中
varrouter=newRouter({
'mode':'history',
routes
})
//导出路由
exportdefaultrouter;
3.在页面中使用路由
在vue-router中,我们也可以看到它定义了两个标签
总结
以上所述是小编给大家介绍的vuerouter的基本使用和配置教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。