乌鸟鸟:什么是路由-----路由的基本使用

 行业新闻     |      2020-11-20 23:05

  import Vue from "vue"

  import VueRouter from "vue-router";

  import Movie from ""

  import Cinema from ""

  import Mine from "";

  import HotMovie from ""

  import CommingMovie from ""

  import NotFound from ""

  import Detail from ""

  import Login from ""

  import MineTwo from ""

  Vue.use(VueRouter);

  //路由的配置

  const router=new VueRouter({

  mode:"hash",

  routes:[

  {

  path:"/",

  redirect:"/movie"

  },

  //一个对象代表一个路由的配置项

  {

  name:"movie",

  meta:{

  title:"电影",

  flag:true

  },

  path:"/movie",//匹配用户请求的地址

  component:Movie,//当路径匹配成功后显示对于的组件

  // /movie/hotmovie

  children:[

  {

  name:"hotmovie",

  path:"hotmovie",

  component:HotMovie

  },

  {

  name:"commingmovie",

  path:"commingmovie",

  component:CommingMovie

  }

  ]

  },

  {

  path:"/cinema",//匹配用户请求的地址

  meta:{

  title:"影院",

  flag:true

  },

  component:Cinema//当路径匹配成功后显示对于的组件

  },

  {

  path:"/mine",//匹配用户请求的地址

  meta:{

  title:"我的",

  flag:false

  },

  children:[

  {

  path:"mineTwo/:id/:name",

  component:MineTwo

  }

  ],

  component:Mine//当路径匹配成功后显示对于的组件

  },

  {

  name:"detail",

  meta:{

  title:"详情",

  flag:false

  },

  //path:'/detail/:id/:name',

  path:"/detail",

  component:Detail,

  //props:true

  },

  {

  path:"/login",

  component:Login

  },

  {

  path:"**",

  component:NotFound

  }

  ]

  })

  export default router;