Vue,vue路由
您的位置: 主页 > web前端文章 > 前端其他文章 >

使用Vue的路由器库【访问量:84】

安装Vue路由器当我们使用Vue CLI来启动我们的项目时,我们没有包含vue-router  软件包。这是您可以通过选择手动配置选项启动项目时指定的选项。 不用担心,但我们可以自己添加vue路由器。 首先,访问控制台中的项目文件夹并运行以下命令:

> yarn add vue-router

注意:我们的项目使用纱线,但如果您使用的是npm,则可以使用npm install vue-router --save 接下来,我们必须创建一个包含  以下内容的/src/router.js文件:

import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'
Vue.use(Router)export default new Router({
  routes: [
    {
      path: '/',
      name: 'skills',
      component: Skills    },
    {
      path: '/about',
      name: 'about',
      component: About    }
  ]})

这将导入我们的Skills.vue  组件以及一个 尚不存在的About组件。 继续并快速创建该文件并粘贴以下内容:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali...</p>
  </div>
</template>

接下来,访问/src/main.js  并添加以下内容:

// other imports removed for brevity
import router from './router'

new Vue({
router,               // Add this line
render: h => h(App)
}).$mount('#app')

接下来,访问/src/App.vue  文件并修改<template>  部分,如下所示:

<template>
  <div id="app">
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    <router-view/>
  </div>
</template>

我们使用Vue组件router-link添加一个带有两个链接的导航元素。 我们还添加了另一个Vue组件路由器视图  ,它表示当用户单击导航项目时视图的放置位置。 当我们在App.vue中时,让我们 在组件的样式部分给我们的导航一些样式。另外,修改主体  选择器,以便我们的UI不再居中居中:

body {
      background-color: #EEEEEE;
      font-family: 'Montserrat', sans-serif;
      display: grid;
      grid-template-rows: auto;
      justify-items: center;
      padding-top: 50px;
  }
  nav {
      padding: 20px 20px 20px 0;
  }
  nav a {
      padding: 10px;
      text-decoration: none;
      background: #fff;
      border-radius: 3px;
      color: rgb(0, 110, 255);
      font-weight: bold;
      margin-right: 15px;
  }

大保存它,这应该是浏览器中的结果:

7-1-1518461835341.png

7-2-1518461839630.png

2018-04-04
上一篇:没有了
匿名评论