vue - rounter

 vue - router 路由使用

1.创建vue-router 实例

2.使用vue-router 需要在main.js 中声明使用

3.在需要的模板中加入一行代码：

　　<router-view></router-view>

 

目录结构：

src：

　　- assets

　　- components

　　- router  -- 路由配置文件夹（名称固定）

　　　　- index.js  -- 自定义路由配置文件

　　- views    -- 我们自定义的模板

　　- main.js

大概的流程：

 

 index.js 内容示例

import {createRouter, createWebHistory} from 'vue-router'
import Home from "../views/Home.vue"
import Home2 from "../views/Home2.vue"
import NotFound from "../views/NotFound.vue"

const routers = [
    {path: '/', component: Home},
    {path: '/home2', component: Home2},
    // 懒加载 -> 只有这跳转请求时才会加载相关js文件
    {path: '/home3', component: ()=> import('../views/Home3.vue')},
    // 指定路由名称, 引用时 to={name: "home4", params:{key: "参数"}} -> 固定语法,
    // 参数使用params 进行传递
    {path: '/Home4:key', name: 'home4', component: ()=> import('../views/Home4.vue')},
    {path: '/xxx', redirect: '/xxx/xxxxxxx'}, // 重定向
    {path: '/:pathMatch(.*)*', component: NotFound}, // 正则 404 路由捕获
]

const router = createRouter({
    history: createWebHistory(),
    routes: routers,
    linkActiveClass: 'my-name'  // 自定义class name
})
export default router

 

main.js 内容示例

import { createApp } from 'vue';
import App from './App.vue';
import router from '../router/index'

// 创建Vue应用并将App.vue挂载到#app元素
createApp(App).use(router).mount('#app');

 

 

跳转 - 路由 - 不刷新页面（局部组件数据刷新）

router-link 使用， 目的： 防止a 标签跳转刷新整个页面，产生新的http 请求

 示例：

<router-link to="/"> 主页 </router-link>
<router-link to="/path1"> 主页2 </router-link>
<router-link to="/path2"> 主页3 </router-link>

<router-view></router-view>

 

css 固定作用域

只需要在 style  中添加 scoped 属性

<style scoped>
    img {
        width: 150px;
        height: 150px;
  }
 
</style>