前端vue框架 路由的安装及使用

Posted 2021-01-08 mcll

安装:

　　1.cmd下输入: npm install vue-router --save //安装路由
　　2.npm run dev //重新启动

使用:
　　1.在mian.js下引入路由 import VueRouter from ‘vue-router‘
　　2.在mian.js下使用路由 Vue.use(VueRouter)
　　3.在mian.js下配置路由

　　　　const router(定义一个名字)=new VueRouter({

　　　　　　rotes:[
　　　　　　　　{path:"(路由)",component:跳转的位置},
　　　　　　　　{path:"/",component:VueRouter}, //跳转的位置要引进来（import VueRouter from ‘vue-router‘）
　　　　　　　　{path:"路由",name:‘取个名字‘,component:跳转的位置}, //输入个name，用于绑定个名字
　　　　　　　　{path:"/about(路由)",name:‘取个名字‘,component:跳转的位置,children:[
　　　　　　　　{path:"/about/aboutour(路由)",name:‘取个名字‘,component:跳转的位置},
　　　　　　　　{path:"/aboutour(路由)",name:‘取个名字‘,component:跳转的位置}]}, //二级路由
　　　　　　　　{path:"(路由)",component:跳转的位置,beforeEnter: (to, from, next) => {
　　　　　　　　　　　例如:alert(‘非登录状态禁止访问页面‘);
　　　　　　　　　　　next(false); //禁止跳转到此页面
　　　　　　　　}},//路由独享守卫 针对指定页面 全局守卫也可以在此写
　　　　　　　　{path:"路由",name:‘取个名字‘,components:{
　　　　　　　　　　default:‘原本要跳转的‘,
　　　　　　　　　　‘取的名字‘：取的名字，
　　　　　　　　　　‘取的名字‘：取的名字
　　　　　　　　}},//一个页面想要另外一个页面的某些东西 在原本页面写入<route-view name="取个名字"></route-view>
　　　　　　　　{path:‘*‘,redirect:‘/‘} //如果用户输入错误，默认展示页
　　　　　　],
　　　　　　mode:"history" //去掉后面的#号
　　　})