vue router name命名规范_vue-router使用

vue-router基本用法vue-router的实现原理：路由不同的页面也就是加载不同的组件。路由的三个基本概念：router：它是一条路由，test按钮 => test内容，这是一条route，test1按钮 => test1内容，这是另一条路由。routers：它是一组路由，把上面的每一条路由组合起来，形成一个数组。[{test按钮 => test内容}, {test1按钮

weixin_39737368

1153人浏览 · 2020-11-20 05:31:19

weixin_39737368 · 2020-11-20 05:31:19 发布

vue-router基本用法

vue-router的实现原理：

路由不同的页面也就是加载不同的组件。

路由的三个基本概念：

router：它是一条路由，test按钮 => test内容，这是一条route，test1按钮 => test1内容，这是另一条路由。
routers：它是一组路由，把上面的每一条路由组合起来，形成一个数组。[{test按钮 => test内容}, {test1按钮 => test1内容}]。
router：它是一个机制，想当于一个管理者，它来管理路由。当用户点击test按钮时，router去routes中查找，找到对应的test内容。
客户端中的路由，实际上就是dom元素得显示和隐藏。当页面中显示test内容的时候，其他内容全部隐藏，反正也是一样。

vue-router中的路由基于以上4点实现：

在vue中我们所有的内容都是组件化的，所有只需要把路径和组件对应起来，然后在组件中把页面渲染出来就可以了。

通过npm安装vue-router：

npm install --save vue-router

在main.js中使用Vue.use（）加载插件：

important Vue from 'vue
important VueRouter from 'vue-router'

Vue.use(VueRouter)

页面实现：

在vue-router中，由两个标签<router-view>和<router-link>来对应点击和显示部分；<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是在点击后匹配的内容显示在什么地方；<router-link>还有一个非常重要的属性to，定义点击之后跳到哪里去。

路由配置：

首先定义route，它是一个对象，由两部分组成：path、component；path指路径，component指组件；代码如下：

const routes = [
  { path: '/home', component: Home },
  { path: '/list', component: List }
]

创建router对路由进行管理，由构造函数new vueRouter()创建，接收routes参数，代码如下：

const router = new VueRouter({
  routes: routes   // routers简写
})

配置完成后把router实例注入到vue根实例中，开始使用，代码如下：

const app = new Vue({
  router
}).$mount('#app')

执行过程：

当点击router-link标签时，会寻找它的to属性，它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件，最后再把组件渲染到 <router-view> 标签所在的地方。

接下来我们简单体验一下（不要忘了安装vue-router）：

<template>
  <div>
    <h1>home</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        msg: "我是home 组件"
      }
    }
  }
</script>

<template>
  <div>
    <h1>list</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        msg: "我是list 组件"
      }
    }
  }
</script>

在App.vue中定义<router-link>和<router-view>

<template>
  <div class="app">
    <header>
      // router-link 定义点击导航后到哪个路径下
      <router-link to="/home">Home</router-link>
      <router-link to="/list">List</router-link>
    </header>
    // 对应的组件内容渲染到router-view中
    <router-view></router-view>   
  </div>
</template>

<script>
export default {
}
</script>

在src目录下再新建一个router.js定义router，也就是路径到组件的映射

import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
import home from "./home.vue";
import list from "./list.vue";

// vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
  {
    path:"/home",
    component: home
  },
  {
    path: "/list",
    component: list
  }
]

var router =  new VueRouter({
  routes
})
export default router;

把路由注入到实例中，启动路由；也可以在main.js中引入路由，注入到根实例中

import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from "./router.js"
new Vue({
  el: '#app',
  router,  // 注入到根实例中
  render: h => h(App)
})

既然提到了main.js，在这里简单介绍一下：

main.js在渲染的时候会被webpack引入变成app.js文件。
app.js文件在index.html中会被引入。
执行流程：项目加载的过程是index.html -> main.js -> app.vue -> index.js -> xxx.vue，如果main.js里面有钩子，会先走钩子。

这时就可以实现路由之间的切换了，不过会有一个问题：

首次进入页面的时候，页面没有内容，因为首次进入页面，它的路径是'/'，我们并没有给这个路径做相应的配置，我们要把这个路径指向home，用redirect来定义重定向：

const routes = [
  {
    path:"/home",
    component: home
  },
  {
    path: "/list",
    component: list
  },
  {
    path: '/',
    redirect: '/home'
  }
]

这样页面就正常了，首次加载页面显示home，页面切换也可以看到内容的切换。

嵌套路由

嵌套路由的使用，主要是由我们自己的页面结构决定的；举个栗子：比如我们进入home页面的时候，home页下面还有分类的子页面，当我们点击其中一个子页面的时候，它肯定得到相应的子页面部分。
在路由的设计上，首先进入到home页，然后才能进入到子页面1、子页面2...，相当于home得子元素；所有vue提供了childrens属性，它也是一组路由。
首先我们在home页面上先定义3个router-link标签，定义一个router-view标签用于渲染对应的组件，home.vue代码如下：

<template>
  <div>
    <h1>home</h1>
    // router-link 的to属性要注意，路由是先进入到home,然后才进入相应的子路由如 page1,所以写的时候要把home带上
    <p>
      <router-link to="/home/page1">子页面1</router-link>
      <router-link to="/home/page2">子页面2</router-link>
      <router-link to="/home/page3">子页面3</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

router.js配置路由：

const

这时我们再点击home时，它下面会出现子页面1、子页面2、子页面3，但没有任何对应的组件进行显示，要想在点击home时，渲染相应的子组件，需要再配置一个路由，代码如下：

children: [
  {
    path: "page1",
    component: page1
  },
  {
    path: "page2",
    component: page2
  },
  {
    path: "page3",
    component: page3
  }，
  // 当进入home时，组件显示
  {
    path: "",
    component: page1
  }
]

this.$router.push({})实现路由跳转，顺带说一嘴命名路由，我们再写一个路由，代码如下:

{
   path: "/system/:id",
   name: "system",
   component: system
}

在router-link中to属性就可以使用对象了

<router-link to="/system/999">System999</router-link>
// 等同于下面 
<router-link :to="{ name: 'system', params: { systemId: 999 }}">System</router-link>   // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定

应用到按钮上跳转另一个组件

<template>
  <div>
    <el-button @click="jumpPage1">跳转子页面1</el-button>
  </div>
</template>
<script>
export default {
  data () {
  },
  methods: {
    jumpPage1 () {
      this.$router.push("home")
    }
  }
}
</script>

最后

vue-router官方文档学习router.vuejs.org

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐