vue 路由的安装及使用
安装:
1.cmd下输入: npm install vue-router --save //安装路由
2.npm run dev //重新启动
使用:
1.在mian.js下引入,使用,配置路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router(定义一个名字)=new VueRouter({
routes:[
{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" //去掉后面的#号
})