路由的基本使用（vue）

最新推荐文章于 2023-10-31 21:19:25 发布

richest_qi

最新推荐文章于 2023-10-31 21:19:25 发布

阅读量132

点赞数

分类专栏： Vue2 文章标签： vue 路由 vue-router

本文链接：https://blog.csdn.net/qzw752890913/article/details/124829681

版权

Vue2 专栏收录该内容

84 篇文章 8 订阅

订阅专栏

文章目录

新建vue应用
初步搭建页面
- public/index.html
- App.vue
安装vue路由插件：vue-router
定义路由组件
- pages/Home.vue
- pages/About.vue
编写路由链接，指定路由展示位置
- App.vue
注册路由
- router/index.js
- main.js
启动应用，测试效果

新建vue应用

vue create vue_demo，创建vue应用。其中，vue@2。

初步搭建页面

在这里插入图片描述
主要涉及两处修改：

public文件夹下新建文件夹：css，css文件夹下放入文件：bootstrap.css，并在public/index.html中引入bootstrap.css。
修改入口组件App.vue。

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
  <div id="app">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <a class="list-group-item" href="./about.html">About</a>
          <a class="list-group-item active" href="./home.html">Home</a>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <h2>我是Home的内容</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

安装vue路由插件：vue-router

npm install --save vue-router@3，安装3版本的vue-router。

定义路由组件

src文件夹下新建子文件夹：pages，用于存放路由组件：Home组件和About组件。
pages/Home.vue，对应Home组件；pages/About.vue，对应About组件。

pages/Home.vue

<template>
  <h2>我是Home的内容</h2>
</template>

<script>
export default {
    name:"Home"
}
</script>

pages/About.vue

<template>
  <h2>我是About的内容</h2>
</template>

<script>
export default {
    name:"About"
}
</script>

编写路由链接，指定路由展示位置

涉及修改文件App.vue，主要有如下两点：

routerLink，即路由链接。其中，to属性指定路径，active-class指定高亮样式。
routerView，指定路由展示位置。

App.vue

<template>
  <div id="app">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link to="/about" active-class="active" class="list-group-item">About</router-link>
          <router-link to="/home"  active-class="active" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

注册路由

涉及以下两个变更：

src文件夹下文件子文件夹：router，router下新建文件：index.js。
修改入口文件main.js。

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import About from "../pages/About.vue";
import Home from "../pages/Home.vue";

Vue.use(VueRouter);

export default new VueRouter({
    routes:[
        {
            path:"/about",
            component:About
        },
        {
            path:"/home",
            component:Home
        }
    ]
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

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

启动应用，测试效果

npm run serve启动应用，测试效果。
在这里插入图片描述

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由的基本使用（vue）

文章目录新建vue应用初步搭建页面public/index.htmlApp.vue安装vue路由插件：vue-router定义路由组件pages/Home.vuepages/About.vue编写路由链接，指定路由展示位置App.vue注册路由router/index.jsmain.js启动应用，测试效果新建vue应用vue create vue_demo，创建vue应用。其中，vue@2。初步搭建页面主要涉及两处修改：public文件夹下新建文件夹：css，css文件夹下放入文件：boots
复制链接

扫一扫