vue路由--1基本使用

Posted 2021-12-20 webcode

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue路由--1基本使用相关的知识，希望对你有一定的参考价值。

路由的引用

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：（先导入，再注册）

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

Vue.use(VueRouter)

基本使用示例1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>let_const</title>
    <!-- <link rel="shortcut icon" href="#" /> -->
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<div id="app">
    <!-- 路由的执行过程
 1.先是点a链接触发url地址的改变，然后被route路由监听到，进行路由规则path的匹配。
 2.匹配后，展示path对应的component组件
 3.将组件放到<router-view></router-view>占位里去 -->

    <!-- 写法一  不推荐-->
    <!-- #hash不能丢 -->
    <!-- <a href="#/login">登录</a>
    <a href="#/register">注册</a> -->
    <hr>
    <!-- 写法二 -->
    <!-- tag标签可以随意，不影响内部绑定 -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!-- 占位符  -->
    <router-view></router-view>
</div>

<body>


    <script>
        // 组件模板对象 
        // var login = 
        //     template: ‘<h1>登录组件</h1>‘
        // 
        // // 
        // var register = 
        //     template: ‘<h1>注册组件</h1>‘
        // 

        var login = 
            template: ‘<h1>登录组件</h1>‘
        

        var register = 
            template: ‘<h1>注册组件</h1>‘
        



        // 组件模板名称
        // Vue.component(‘login2‘, 
        //     template: ‘<h1>登录组件</h1>‘
        // )


        var routerObj = new VueRouter(
            // 路由匹配规则
            routes: [
                // 注意：component必须是一个组件对象，不是组件模板名称
                // redirect重定向,默认指定根路径
                // 如果不写，默认进来是空白的根路径，不合理
                //  path: ‘/‘, redirect: ‘/login‘ ,
                 path: ‘/login‘, component: login ,
                 path: ‘/register‘, component: register 
            ]
        )

        new Vue(
            el: "#app",
            data: ,
            methods: ,
            router: routerObj

        )
    </script>
</body>

</html>

以上是关于vue路由--1基本使用的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段11——vue路由的配置

vue知识点-$route和$router