vue-router

1 安装

npm install vue-router --save
手动创建文件+配置

或

vue add router

image

history 历史模式。如果在浏览器上地址栏内，不显示 # 号，就输入y，反之亦然


  • eslink语法检查
    如果在创建项目中，使用了eslink语法检查，后期在编写代码时，又不想检查语法则：
    标识 /* eslint-disable */ 该页面就不会检测语法了。
    <template>
	<div>
		<h2>课程页面</h2>
	</div>
</template>

<script>
	/* eslint-disable */
</script>

<style scoped>

</style>

  • setup
    vue3中的写法，你可以写在export default{}中。也可以写到 script 标签中，
    <template>
	<div>
		<h2>课程页面</h2>
		<h3>讲师：{{name}}</h3>
	</div>
</template>

<script setup>
	/* eslint-disable */
	// 写相应的变量或者常量
	import {ref} from 'vue'
	const name = ref('刘昆鹏')

</script>

<style scoped>

</style>

2 认识router

import {createRouter, createWebHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
    {
        path: '/',
        component: HomeView
    },
    {
        path: '/home',
        name: 'Home',
        component: HomeView
    },
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),  // 历史模式，导入 createMemoryHistory 浏览器上就有 # 号了
    routes
})

export default router

3 router-URL传值

3-1 静态

  • 首先可以在 view 文件夹中，创建单页面文件

    <template>
	<div>
		<h2>课程页面</h2>
		<h3>讲师：{{name}}</h3>
		<div>当前页：{{page}}</div>
		<div>数量：{{size}}</div>
	</div>
</template>

<script setup>
	/* eslint-disable */
	// 写相应的变量或者常量
	import {ref} from 'vue'
	import {useRoute, onBeforeRouteUpdate} from 'vue-router'

	const name = ref('刘昆鹏')

	const route = useRoute()
	const size = ref(route.query.size || 0)  // || python中 or 的意思
	const page = ref(route.query.page || 0)

	// 监听路由传值，路由变化的。
	onBeforeRouteUpdate((to, from) =>{
		page.value = to.query.page || 0;
		size.value = to.query.size || 0;
	})

</script>

<style scoped>

</style>

  • 在 router -> index.js 中配置路由

    import {createRouter, createWebHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
	{
		path: '/',
		component: HomeView
	},
	{
		path: '/home',
		name: 'Home',
		component: HomeView
	},
	{
		path: '/course',
		name: 'Course',
		component: () => import('../views/CourseView')
	},
]

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes
})

export default router

  • App.vue 文件中

    <template>
	<div>
		<div class="menu">
			<div class="container">
				<router-link to="/">源代码教育</router-link>
				<router-link to="/home">首页</router-link>
				<router-link :to="{name: 'Course', query: {size:1, page:9}}">课程</router-link>
			</div>
		</div>
		<div class="container">
			<router-view/>
		</div>
	</div>
</template>

3-2 动态

<template>
    <div>
        <h2>详细页面</h2>
        <h3>id:{{v1.id}}</h3>
    </div>
</template>

<script setup>
    import {ref} from 'vue'
    import {onBeforeRouteUpdate, useRoute} from "vue-router";

    const route = useRoute()
    const v1 = ref(route.params)

    onBeforeRouteUpdate((to) =>{
        v1.value = to.params || 0;
    })
</script>

<style scoped>

</style>

import {createRouter, createWebHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
    {
        path: '/detail/:id',
        name: 'Detail',
        component: () => import('../views/DetailView')
    },
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

<template>
    <div>
        <div class="menu">
            <div class="container">
                <router-link :to="{name: 'Detail', params:{id: 99}}">详细-99</router-link>
            </div>
        </div>
        <div class="container">
            <router-view/>
        </div>
    </div>
</template>

4 路由嵌套

在router -> index.js 中配置 children 子路由：

{
    path: '/user/:id',
    name: 'user',
    component: User,
    props: ({params , query})=>({
        id: params.id,
        title: query. title
    }),
    children: [
    //当/user/ :id/profile 匹配成功，
    // Profile 会被渲染在User的<router-view> 中
            {
                path: "profile",
                component: Profile
            },
    //当/user/ :id/posts 匹配成功，
    // Posts 会被渲染在User的<router-view> 中
            {
                path: "posts",
                component: Posts
        }
    ]
}

如果想要在子页面切换中，默认选中儿子页面，需要配置如下：

{
    path: '/pins',
    // name: 'Pins', 注释后，可以在 <router-link :to="{name: 'New'}">沸点</router-link>  方式2
    component: () => import('../views/PinsView'),
    children: [
        {
            path: '',
            // component: () => import('../views/NewView'),
            redirect: {name: 'New'}  // 方式1
        },
        {
            path: 'new',
            name: 'New',
            component: () => import('../views/NewView'),
        },
        {
            path: 'hot',
            name: 'Hot',
            component: () => import('../views/HotView'),
        },
    ]
}

在相应的 .vue 文件中，配置相应的 <router-link> 和 <router-view/>


5 编程式导航

如果想要是跳转+加载组件：

  • router-link标签
  • router对象实现 this.$router.push
<script setup>
    import {useRouter} from "vue-router";

    const router = useRouter();

    function doClick(){
        // 跳转到首页

        router.push({path: '/home'});
        // router.push({name: 'Home'});
        // router.push({name: 'Course', query: {page: 10, size: 20}});
        // router.push({name: 'Detail', params: {id: 100}});

        // router.replace({path: '/home'});
        // router.replace({name: 'Home'});
        // router.replace({name: 'Course', query: {page: 10, size: 20}});
        // router.replace({name: 'Detail', params: {id: 100}});

        // 两者不一样之处就是回退时，不一样
    }
</script>

5-1 登录跳转（含顶部）

image

<template>
    <div style="width: 400px;height: 200px;margin: 100px auto">
        <input type="text" v-model="username">
        <input type="password" v-model="password">
        <input type="button" value="登录" @click="doLogin">
    </div>
</template>

<script setup>
    import {useRouter} from "vue-router";
    import {ref} from 'vue'

    const router = useRouter()
    const username = ref('')
    const password = ref('')

    function doLogin() {
        //...
        if (username.value.length>0 && password.value.length>0){
            console.log('登录成果');
            router.replace({name: 'Home'});
        }else{
            console.log('登录失败')
        }
    }

</script>

5-2 登录跳转（不含顶部）

该方法，主要在 router->index.js 中做操作

image

import {createRouter, createWebHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [

    {
        path: '/',
        component: HomeView,
        children: [
            {
                path: '',
                redirect: {name: 'Index'}
            },
            {
                path: '/index',
                name: 'Index',
                component: () => import('../views/IndesView'),
            },
            {
                path: '/course',
                name: 'Course',
                component: () => import('../views/CourseView')
            },
		]
	},
	// 顶级页面只有两个路由，剩下都是子路由
    {
        path: '/login',
        name: 'Login',
        component: () => import('../views/LoginView')
    },
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

6 导航守卫（全局）

需要在 router -> index.js 中配置

router.beforeEach((to, from, next)=>{
    // to，即将访问的路由对象
    // from，当前正要离开的路由对象
    // next() 继续向后执行，去to的页面；
    // next(false) 不跳转，还在当前页面；
    // next('/xxx') next({name: 'xxx'}) next({path: '/xx'})
    let token = sessionStorage.getItem('isLogin')
    if (token){
        // 已登录，可以向目标访问
        next();
    }

    // 未登录，登录页面
    if(to.name === "Login"){
        next();
    }

    // 未登录，访问的其他地址
    next({name: 'Login'});
})

7 存储数据

  • cookie，超时时间+发送请求自动携带。

  • sessionStorage，当浏览器关闭时，自动清除。

  • localStorage，长时间存储浏览器。

    localStorage.setItem(key,value)
localStorage.getItem(key)
localStorage.removeItem(key)
localStorage.clear()
posted @ 2022-11-14 17:31  角角边  Views(43)  Comments(0)    收藏  举报