前端学习八（Vue Router）

Vue Router官网：https://router.vuejs.org/zh/guide/#html

一、引用库

<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>

二、定义 (路由) 组件（可以从其他文件 import 进来）

Login组件如下

 const Login = {
            template: `
            

                
                    
用户登录

                    
                        
                            
                        
                        
                            
                        
                        
                            点击登录
                        
                    
                
            
`,
            data() {
                return {
                    form: {
                        username: "",
                        password: ""
                    }
                }
            },
            methods: {
                async login() {
                    const r = await http.post("/user/login/", this.form)
                    if (r.status === 200) {
                        const token = r.data.token;
                        window.sessionStorage.setItem("token", token)
                        // 编程式跳转路由
                        this.$router.push('/home')
                        // this.$router.push({ path: '/login' })
                    } else {
                        alert("登录失败")
                    }
                }
            }
        }

Home组件如下

        const Home = {
            template: `
            

                获取项目
                
                    
                    
                    
                    
                    
                    
                
            
` ,
            data() {
                return { tableData: "" }
            },
            methods: {
                async getProjects() {
                    const r = await http.get("/projects/")
                    console.log(r);
                    if (r.status === 200) {
                        this.tableData = r.data.results
                    } else {
                        alert("获取项目失败")
                    }
                },
            }
        }

三、定义路由以及创建路由实例 

        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，
        // 或者，只是一个组件配置对象。
        const routes = [
            { path: "/login", component: Login },
            { path: "/home", component: Home }
        ]

        // 3. 创建 router 实例
        const router = new VueRouter({
            routes: routes
            // 如果定义的路由名和key相同，则可以如下简写 
            // routes
        })

子路由

const routes = [
            {
                path: "/",
                component: Home,
                // 子路由，内容会渲染在父路由的router-view中
                children: [
                    { path: "/index", component: index },
                    { path: "/project", component: project },
                    { path: "/api", component: api }
                ]
            }, {
                path: "/login",
                component: Login
            }
        ]

别名和重定向

        const routes = [
            // 重定向
            { path: "/", redirect: "/login" },
            // 别名name
            { name: "rgs", path: "/register", component: Register },
            { path: "/login", component: Login },
            { path: "/home", component: Home }
        ]

别名被使用的两种方式

// 编程式跳转路由，使用别名
this.$router.push({ name: 'rgs' })    

<router-link :to="{name:'rgs'}" >注册router-link>

四、注入路由到vue实例

// 4. 注入路由到vue实例
        const app = new Vue({
            el: "#app",
            router: router
        })

 五、使用

　　<div id='app'>
        
        <router-view>router-view>
    div>

六、编程式导航和声明式导航

// 编程式跳转路由
this.$router.push('/home')

<router-link to="/login">登录页面router-link>

七、上面学习内容练习的实例

实例1

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js">script>
head>

<body>
    <div id='app'>
        
        <router-view>router-view>
    div>
    <script>
        const http = axios.create({
            baseURL: 'http://api.keyou.site:8000',
            timeout: 1000
        });

        http.interceptors.request.use(function (config) {
            const token = window.sessionStorage.getItem("token")
            if (token) {
                config.headers.Authorization = 'JWT ' + token
            }
            return config;
        }, function (error) {
            return Promise.reject(error);
        });
        // 1. 定义 (路由) 组件,可以从其他文件 import 进来
        const Login = {
            template: `
            <div class="box">
                <el-card class="box-card">
                    <h3>用户登录</h3>
                    <el-form :model="form" label-width="80px">
                        <el-form-item label="账号">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="form.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="login">点击登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>`,
            data() {
                return {
                    form: {
                        username: "musen123",
                        password: "123456"
                    }
                }
            },
            methods: {
                async login() {
                    const r = await http.post("/user/login/", this.form)
                    if (r.status === 200) {
                        const token = r.data.token;
                        window.sessionStorage.setItem("token", token)
                        // 编程式跳转路由
                        this.$router.push('/home')
                        // this.$router.push({ path: '/login' })
                    } else {
                        alert("登录失败")
                    }
                }
            }
        }
        const Home = {
            template: `
            <div class="box2">
                <el-button type="primary" @click="getProjects">获取项目</el-button>
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="id" label="ID" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="项目" width="180">
                    </el-table-column>
                    <el-table-column prop="create_time" label="创建时间" min-width="200px">
                    </el-table-column>
                </el-table>
            </div>` ,
            data() {
                return { tableData: "" }
            },
            methods: {
                async getProjects() {
                    const r = await http.get("/projects/")
                    console.log(r);
                    if (r.status === 200) {
                        this.tableData = r.data.results
                    } else {
                        alert("获取项目失败")
                    }
                },
            }
        }

        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器，
        // 或者，只是一个组件配置对象。我们晚点再讨论嵌套路由。
        const routes = [
            { path: "/login", component: Login },
            { path: "/home", component: Home }
        ]

        // 3. 创建 router 实例
        const router = new VueRouter({
            routes: routes
            // 如果定义的路由名和key相同，则可以如下简写 
            // routes
        })

        // 4. 注入路由到vue实例
        const app = new Vue({
            el: "#app",
            router: router
        })
    script>
body>

html>

实例2

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js">script>
head>

<body>
    <div id='app'>
        <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="11">
                
                <router-link to="/login">登录页面router-link>
            el-menu-item>
            <el-menu-item index="12">
                <router-link to="/home">个人中心router-link>
            el-menu-item>

            <el-menu-item index="13">
                
                <router-link :to="{name:'rgs'}" >注册router-link>
            el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台template>
                <el-menu-item index="2-1">选项1el-menu-item>
                <el-menu-item index="2-2">选项2el-menu-item>
                <el-menu-item index="2-3">选项3el-menu-item>
            el-submenu>
            <el-menu-item index="3" disabled>消息中心el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理a>el-menu-item>
        el-menu>
        
        <router-view>router-view>
    div>
    <script>
        const http = axios.create({
            baseURL: 'http://api.keyou.site:8000',
            timeout: 1000
        });

        http.interceptors.request.use(function (config) {
            const token = window.sessionStorage.getItem("token")
            if (token) {
                config.headers.Authorization = 'JWT ' + token
            }
            return config;
        }, function (error) {
            return Promise.reject(error);
        });

        // 1. 定义 (路由) 组件
        const Login = {
            template: `
        <div class="box">
            <el-card class="box-card">
                <h3>用户登录</h3>
                <el-form :model="form" label-width="80px">
                    <el-form-item label="账号">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">点击登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>`,
            data() {
                return {
                    form: {
                        username: "musen123",
                        password: "123456"
                    }
                }
            },
            methods: {
                async login() {
                    const r = await http.post("/user/login/", this.form)
                    if (r.status === 200) {
                        const token = r.data.token;
                        window.sessionStorage.setItem("token", token)
                        // 编程式跳转路由
                        this.$router.push('/home')
                        // this.$router.push({ path: '/login' })
                    } else {
                        alert("登录失败")
                    }
                }
            }
        }
        const Home = {
            template: `
        <div class="box2">
            <el-button type="primary" @click="registerBtn">注册</el-button>
            <el-button type="primary" @click="getProjects">获取项目</el-button>
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="id" label="ID" width="180">
                </el-table-column>
                <el-table-column prop="name" label="项目" width="180">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" min-width="200px">
                </el-table-column>
            </el-table>
        </div>` ,
            data() {
                return { tableData: "" }
            },
            methods: {
                async getProjects() {
                    const r = await http.get("/projects/")
                    console.log(r);
                    if (r.status === 200) {
                        this.tableData = r.data.results
                    } else {
                        alert("获取项目失败")
                    }
                },
                async registerBtn() {
                    // 编程式跳转路由，使用别名
                    this.$router.push({ name: 'rgs' })
                },
            }
        }
        const Register = {
            template: `<p1>注册页面</p1>`
        }

        const routes = [
            // 重定向
            { path: "/", redirect: "/login" },
            // 别名name
            { name: "rgs", path: "/register", component: Register },
            { path: "/login", component: Login },
            { path: "/home", component: Home }
        ]

        const router = new VueRouter({
            routes
        })

        var vm = new Vue({
            el: "#app",
            router: router
        })
    script>
body>

html>

实例3

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js">script>
head>

<body>
    <div id='app'>
        <router-view>router-view>
    div>
    <script>
        const http = axios.create({
            baseURL: 'http://api.keyou.site:8000',
            timeout: 1000
        });

        http.interceptors.request.use(function (config) {
            const token = window.sessionStorage.getItem("token")
            if (token) {
                config.headers.Authorization = 'JWT ' + token
            }
            return config;
        }, function (error) {
            return Promise.reject(error);
        });

        // 1. 定义 (路由) 组件
        const Login = {
            template: `
        <div class="box">
            <el-card class="box-card">
                <h3>用户登录</h3>
                <el-form :model="form" label-width="80px">
                    <el-form-item label="账号">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">点击登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>`,
            data() {
                return {
                    form: {
                        username: "musen123",
                        password: "123456"
                    }
                }
            },
            methods: {
                async login() {
                    const r = await http.post("/user/login/", this.form)
                    if (r.status === 200) {
                        const token = r.data.token;
                        window.sessionStorage.setItem("token", token)
                        // 编程式跳转路由
                        this.$router.push('/')
                        // this.$router.push({ path: '/login' })
                    } else {
                        alert("登录失败")
                    }
                }
            }
        }

        const Home = {
            template: `
            <div>
            <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">
                <el-menu-item index="1">
                    <router-link to="/index">index页面</router-link>
                </el-menu-item>
                <el-menu-item index="2">
                    <router-link to="/project">项目页面</router-link>
                </el-menu-item>
                <el-menu-item index="2">
                    <router-link to="/api">api页面</router-link>
                </el-menu-item>   
            </el-menu>
            <router-view></router-view>        
        </div>`
        }

        const index = {
            template: `<h1>index页面</h1>`
        }

        const project = {
            template: `<h1>项目页面</h1>`
        }

        const api = {
            template: `<h1>api页面</h1>`
        }

        const routes = [
            {
                path: "/",
                component: Home,
                // 子路由，内容会渲染在父路由的router-view中
                children: [
                    { path: "/index", component: index },
                    { path: "/project", component: project },
                    { path: "/api", component: api }
                ]
            }, {
                path: "/login",
                component: Login
            }
        ]

        const router = new VueRouter({
            routes// (缩写) 相当于 routes: routes
        })

        var vm = new Vue({
            el: "#app",
            router: router
        })
    script>
body>

html>
前端

相关

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

nodejs 一个简单的web服务器，用于前端自己快速测试部署

深入理解前端跨域方法和原理

【前端单元测试入门04】Karma

前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库

前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

web前端面试题

箭头流程图--前端实现

GMTC 2019-前端夜话《聊聊前端工程师的成长和发展》会后简要总结

第十一章 前端基础

前端性能优化

前端开发框架Vue之findIndex() 的使用

标签