VUE学习11—路由

一级路由:直接在root后显示的。例如m.baidu.com/#/weather

  1. 在components文件夹中,创建好我们需要的一级路由.vue文件,在router/index.js中进行引入和配置
  2. 在访问对应的配置path路径时,想要在哪里显示路由对应的组件(xxx.vue) ,就在哪里写<router-view/> 标签。<router-view> 用来渲染通过路由映射过来的组件。

当一个项目中全部使用一级路由,各个组件间的关系就比较混乱,因为一级路由间都是平级关系。所以使用嵌套路由来体现父子关系。嵌套也就是路由中的路由的意思,组件中可以有自己的路由导航和路由容器(<router-link>、<router-view>),通过路由配置文件router/index.js中的children可实现多层嵌套,然后在vue组件中使用<router-view>就可以了。

路由跳转:

  1. 使用<router-view>标签,给vue组件的跳转提供容器。
  2. 使用<router-link>标签实现跳转(它类似于a标签,区别在于router-link跳转不需要刷新页面)。
  3. ⚠️注意:<router-link>跳转分3类:A. to属性里填写的是跳转的路径,即定义路由时的path路径。B. to属性里使用路由名称name跳转(跳转到router/index.js中对应name的vue文件)。

二级路由:跟在一级路由后显示的。例如m.baidu.com/#/weather/beijing

  1. 在views或者components文件夹下,在对应的一级组件下创建好vue文件。(为方便管理,可根据一级路由组件的名称,建立二级路由组件文件夹。并在其中新建二级路由vue文件。)
  2. 确定在哪个一级路由页面进行二级路由页面的切换,在一级路由对应的位置使用<router-view/> 标签来显示二级路由。
  3. 在router/index.js中配置我们的二级路由规则(在一级路由的json对象中添加children:[ ] 来设置二级路由规则)
Vue.use(VueRouter)

const routes = [
  {
    // 一级路由 film
    path: '/film',
    name: 'Film',
    component: Film,
    // 设置二级路由 film/nowplayying,film/comingsoon
    children: [
      {
        path: 'nowplaying',
        component: FilmNowplaying,
        name: 'FilmNowplaying'
      },
      {
        path: 'comingsoon',
        component: FilmComingsoon,
        name: 'FilmComingsoon'
      }
    ]
  },

⚠️注意:二级路由的path可以直接写路径名“nowplaying”,也可以加上“/film/nowplaying”,但不可以在路径名前面➕/,即“/nowplaying”。这样就成了一级路由了。。。


动态路由:例如点击列表跳转到列表所代表的页面。列表可能有无数个,无法一一配置,因此需要动态路由。

配置动态路由:

  1. 在router/index.js中的path属性中,使用冒号占位符+名称。例如path: ‘/zipcode/:selectedCode’
  2. 在对应的vue视图或者组件文件中,使用this.$router.push()方法进行跳转,括号中使用ES6的字符串表达式。例如:this.$router.push(`/zipcode/${selectedCode}`)。
  3. 动态路由跳转也可以使用命名路由,即在router/index.js中配置路由时增加name属性,在vue视图中使用router.push({name: ‘xxx’, params:{selectedCode: selectedCode }})跳转。
  4. ⚠️注意:使用命名路由进行router.push()跳转与<router-link :to="{ name: 'xxx', params: { selectedCode: selectedCode }}">code detail</router-link>原理一样。