当前位置:   article > 正文

Vue Router使用示例_配置vuerouter例子

配置vuerouter例子

一、认识路由

1、锚点的概念

案例:百度百科
特点:单页Web应用,预先加载页面内容
形式:url#锚点

源码:https://gitee.com/charlinchenlin/store-pos

2、路由的作用

Vue.js 路由允许我们通过锚点定义不同的 URL, 达到访问不同的页面的目的,每个页面的内容通过延迟加载渲染出来。
通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)

3、路由的机制

路由包括路由和转发。
路由器 -> 公网IP -> 映射表 -> 内网IP
映射表:[内网ip1:电脑标识1,内网ip2:电脑标识2]

4、参考文档

https://router.vuejs.org/zh/

二、当作锚点的路由实例

1、创建文件夹和文件

创建文件夹 router,创建index.html

2、复制js资源到文件夹中

vue.js
vue-router.js

3、在index.html页面引入js

4、编写html,指定要跳转的路径

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <router-link to="/">首页</router-link>
        <router-link to="/invest">我要投资</router-link>
        <router-link to="/user">用户中心</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

5、编写js

  1. 定义(路由)组件。
  2. 定义路由
  3. 创建 router 实例,然后传 routes 配置
  4. 创建和挂载根实例。
<script>
    // 1. 定义(路由)组件。
    // 复杂的组件也可以从独立的vue文件中引入
    const welcome = { template: '<div>尚融宝主页</div>' }
    const invest = { template: '<div>投资产品</div>' }
    const user = { template: '<div>用户信息</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: welcome },
        { path: '/invest', component: invest },
        { path: '/user', component: user },
    ]

    // 3. 创建 router 实例,然后传 `routes` 配置
    const router = new VueRouter({
        routes, // (缩写)相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    new Vue({
        el: '#app',
        router,
    })

    // 现在,应用已经启动了!
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

6、效果展示

在这里插入图片描述

三、页面间路由实例

1、安装router :

npm install vue-router --save
  • 1

2、App.vue跳转首页与关于页面

<template>
  <div id="app">
    <router-link to="/home" >首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

3、定义组件Home.vue

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容, 哈哈哈</p>
  </div>
</template>
 
<script>
  export default {
    name: "Home"
  }
</script>
 
<style scoped>
 
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

4、定义组件About.vue

<template>
  <div>
    <h2>我是关于</h2>
    <p>我是关于内容, 呵呵呵</p>
  </div>
</template>
 
<script>
  export default {
    name: "About"
  }
</script>
 
<style scoped>
 
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

5、 在main.js中引入router,并绑定router

mport Vue from 'vue'
import App from './App'
import router from './router'
 
Vue.config.productionTip = false
 
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

6、在index.js中定义路由

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
 
import Home from '../components/Home'
import About from '../components/About'
 
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
 
// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})
 
// 3.将router对象传入到Vue实例
export default router
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

7、浏览器展示效果

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/924713
推荐阅读
相关标签
  

闽ICP备14008679号