前端vue路由基础-CSDN博客

本文链接：https://blog.csdn.net/qq_39177417/article/details/106936500

使用路由的步骤：

下载/安装路由 npm i vue-router
引入路由
注意：路由时vue生态系统中的一部分，路由是依赖于vue的，所以要在引入router之前引入vue

~~我这里的演示是统一写在一个html文件进行~~

    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>

创建路由实例

	const router = new VueRouter()

在vue实例上面挂载路由

	const vm = new Vue({
			//这里是router:router的简写哦
            router,
            el: '#app',
    })

入口
5.1 手动在url地址的“#/”后面输入访问的具体地址（默认路由创建成功之后打开的url路径就是“#/”）
5.2 使用
```
<router-link :to='/路径'>去<router-link/>
```
在这个文件中我使用手动输入url地址进行访问路由
创建路由规则

	const router = new VueRouter({
            routes: [
                { path: '/index', name: 'index', component: Index },
                { path: '/detail', name: 'detail', component: Detail }
            ]
    })

创建路由的组件（路由组件其实也是一个路由实例，和vue实例里面的配置项几乎一样，除了无el，其它vue实例中有的它都可以有）
创建一个路由组件之后就会有对应当前组件的路由实例$router，在$router中有3个常用的方法： 1、push('/地址')跳转到某个路由组件或者使用push({name:'name值'})这种方式也比较常用，因为使用这种写法对象后面还可以继续加要传递的参数啥的；2、replace('/地址')同push的用法和效果，它们之间不同的是push记录了跳转之前的路由组件地址，可以返回，而replace跳转的无法返回；3、back()返回之前的路由地址，这个只能同push配合使用，原因如第2点中所说

	let Index = {
           template: `<div>
                  		 <h1>This is index !!!</h1>
                  		 <button @click='go'>去详情页</button>
                       </div>`,
           methods: {
               go() {
                   this.$router.push({ name: 'detail' })
               }
           }
       }
	let Detail = {
           template: `<div>
                       	<h3>Welcome to DETAIL</h3>
                       	<button @click='back'>返回</button>
                       </div>`,
           methods: {
               back() {
                   this.$router.back()
               }
           }
       }

出口

<!-- 下面是两种写法，选一种即可  要注意的是用后者单标签时后面不能再有其它html代码，否则会显示不出来,亲测过 -->
	<div id="app">
        <!-- 入口 -->
        <!-- <router-link :to='{name:index}'>去首页</router-link> -->
        <!-- 出口 -->
        <router-view></router-view>
        <router-view/>
    </div>

完整源码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1.1 入口 -->
        <!-- <router-link :to='{name:index}'>去首页</router-link> -->
        <!-- 1.4 出口 -->
        <router-view></router-view>
    </div>
    <script src="vue.js"></script>
    <!-- 路由是vue生态系统中的一部分,路由依赖于vue 所以要先引入vue之后再引入路由 -->
    <!-- 1 引入路由 -->
    <script src="./vue-router.js"></script>
    <script>
        let Detail = {
            template: `<div>
                        <h3>Welcome to DETAIL</h3>
                        <button @click='back'>返回</button>
                        </div>`,
            methods: {
                back() {
                    this.$router.back()
                }
            }
        }
        /* 1.3 创建组件*/
        let Index = {
            template: `<div>
                    <h1>This is index !!!</h1>
                    <button @click='go'>去详情页</button>
                        </div>`,
            methods: {
                go() {
                    this.$router.push({ name: 'detail' })
                }
            }
        }
        /* 2 创建路由实例  --- $router  */
        /* 1.2  创建规则 可以为规则取个name 类似插槽*/
        const router = new VueRouter({
            routes: [
                { path: '/index', name: 'index', component: Index },
                { path: '/detail', name: 'detail', component: Detail }
            ]
        })
        const vm = new Vue({
            /* 3 挂载路由 */
            router,
            el: '#app',
        })
    </script>
</body>

</html>