Example of using Vue Router

1. Understanding routing

1. The concept of anchor point

Case: Baidu Encyclopedia
Features: Single-page web application, pre-loading page content
Format: url#anchor point

Source code: https://gitee.com/charlinchenlin/store-pos

2. The role of routing

Vue.js routing allows us to define different URLs through anchors to achieve the purpose of accessing different pages, and the content of each page is rendered through lazy loading.
A multi-view single-page web application (single page web application, SPA) can be realized through Vue.js

3. Routing mechanism

Routing includes routing and forwarding.
Router -> public network IP -> mapping table -> intranet IP
mapping table: [intranet ip1: computer ID 1, intranet ip2: computer ID 2]

4. Reference documents

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

2. Routing instance as an anchor point

1. Create folders and files

Create folder router, create index.html

2. Copy the js resource to the folder

vue.js
vue-router.js

3. Introduce js in the index.html page

4. Write html and specify the path to jump

<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>

5. Write js

Define (routing) components.
define routes
Create a router instance, and then pass routesthe configuration
Create and mount a root instance.

<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>

6. Effect display

insert image description here

3. Example of inter-page routing

1. Install router:

npm install vue-router --save

2. App.vue jumps to the home page and the about page

<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>

3. Define the component Home.vue

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容, 哈哈哈</p>
  </div>
</template>
 
<script>
  export default {
    
    
    name: "Home"
  }
</script>
 
<style scoped>
 
</style>

4. Define the component About.vue

<template>
  <div>
    <h2>我是关于</h2>
    <p>我是关于内容, 呵呵呵</p>
  </div>
</template>
 
<script>
  export default {
    
    
    name: "About"
  }
</script>
 
<style scoped>
 
</style>

5. Introduce router in main.js and bind 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)
})

6. Define routing in 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

7. Browser display effect

insert image description here