安装

安装 @vue/cli-plugin-router 插件

使用

注册路由

在 router 文件夹中的 index.js 中将路由添加到 routes 数组中例如：

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/register',
    name: 'register',
    component: RegisterView
  },
  {
    path: '/404',
    name: '404',
    component: NotFoundView
  },
]

注意：有使用到的组件要import进index.js中

重定向示例：

{
path: '/:catchAll(.*)',
redirect: '/404/',
}

:catchAll() 是关键字，括号里面接收正则表达式，这里的 . 表示任意字符， 表示任意多个 .* ，
redirect 表示重定向的链接。

使用参数的示例：

{
    path: '/userprofile/:userId/',
    name: 'userprofile',
    component: UserProflieView
}

这里 userId 是一个变量，在要当作变量的路由前面加上 : 即可。

在组件中使用路由参数，需要使用 useRoute 组件
示例：

import { useRoute } from 'vue-router';
export default {
name: 'UserProfileView',
components: {
    ContentBase,
},
setup() {
    const route = useRoute();
    console.log(route.params.userId);
}

对应的跳转：

<router-link class="nav-link" :to="{name: 'userprofile', params: {userId : 2,}}">用户动态</router-link>

需要在params对象中添加对应的参数。

跳转

<router-link class="navbar-brand" :to="{name: 'home', params: {}}">Myspace</router-link>

router-link 是vue中的一个组件，使用 : + 名称绑定属性，这里绑定一个to属性表示要跳转的组件，里面是一个对象，对象一个key是name，表示组件的名称

在函数中使用跳转示例：

import router from '@/router/index'
success() {
  router.push({name: 'userlist'});
},

使用 router 的 push api 里面传的参数是一个对象，和 router-link 中 :to 是一样的。

组件中路由的使用

使用 <router-view /> 表示这个标签通过链接的不同渲染不同的组件。
一般放在 App.vue 中， 例如：

<template>
  <NavBar />
  <router-view />
</template>

这里 NavBar 一直保持不变， router-view 根据链接的不同渲染不同页面。
一般链接中可能会带有参数，例如 /userprofile/65 、 /userprofile/32 ，如果想要严格判断完整的路径可以给 router-view 加一个属性 :key="$route.fullPath"
例如：

<template>
  <NavBar />
  <router-view :key="$route.fullPath"/>
</template>

如果不加的话，/userprofile/65 、 /userprofile/32 这两个页面可能显示一样的内容。（比如先访问 /userprofile/65 后访问 /userprofile/32 ，可能页面还是 /userprofile/65 的内容而不是 /userprofile/32 的内容，原因就是只匹配 userprofile 这个路径，而没有匹配后面的参数 ）。

每一个组件由三个部分组成分别是 template script style
其中style部分可以在头标签加上一个 scoped 字段，之后者部分的style就不会影响到其他组件
script部分需要export一个对象，这个对象有两个key，一个是name表示当前组件的名字，另外一个是components表示当前组件用到的组件。有用到的组件也同时需要在script标签中用import关键字来引入。引入之后的组件可以在template中通过标签的形式来使用。

例如：
App.vue

<template>
  <NavBar />
  <router-view/>
</template>

<script>
import NavBar from './components/NavBar.vue';
export default {
  name: "App",
  components: {
    NavBar
  }
}
</script>

<style scoped>
</style>

假如在一个组件内使用其他组件，且那个被使用的组件的标签中有其他的内容，在那个被使用的组件内可以使用 <slot></slot> 标签将传入的内容全部渲染出来
比如：
ContentBase.vue

<template>
    <div class="home">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>   
</template>

<script>
export default {
    name: "ContentBase",
}
</script>

<style scoped>
.container {
    margin-top: 20px;
}
</style>

安装

在vue ui 中项目依赖处搜索 bootstrap 然后安装
同时也需要安装 @popperjs/core

使用

在 main.js 中加入

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap';

安装jquery

npm i jquery

使用

引入

import $ from 'jquery';

GET方法：

$.ajax({  
    url: url,  
    type: "GET",  
    data: {  
    },  
    dataType: "json",  
    success: function (resp) {  
    },  
});

POST方法：

$.ajax({  
    url: url,  
    type: "POST",  
    data: {  
    },  
    dataType: "json",  
    success: function (resp) {  
      
    },  
});

安装

安装Route组件：

npm i react-router-dom

Route组件介绍

• BrowserRouter：所有需要路由的组件，都要包裹在BrowserRouter组件内
• Link：跳转到某个链接，to属性表示跳转到的链接
• Routes：类似于C++中的switch，匹配第一个路径
• Route：路由，path属性表示路径，element属性表示路由到的内容
• useParams 和 useSearchParams 获取路径参数
• Navigate：和Route组件组合使用来实现重定向

使用

BrowserRouter

引入

import { BrowserRouter } from 'react-router-dom';

使用BrowserRouter

在root.render()中用<BrowserRouter></BrowserRouter>将App组件（或者自己定义的其他有使用路由的组件）括起来。

例如

<BrowserRouter>
    <App />
</BrowserRouter>

Link

引入

import { Link } from 'react-router-dom';

使用

将页面内部跳转所用到的<a href="..."></a> 改为 <Link to="..."></Link>，其他保持不变

Routes和Route

引入

import {Routes, Route} from 'react-router-dom';

使用

先写一个<Routes></Routes>标签，然后在里面写<Route />标签
其中<Route /> 标签中有两个参数一个是path另外一个是element，path中放匹配的路径，element中放要渲染的标签

例如

<Routes>
    <Route path='/' element={<Home />}/>
    <Route path='like' element={<Like />}/>
    <Route path='about' element={<About />}/>
    <Route path='issues' element={<Issues />}/>
</Routes>

element中不仅可以放组件的标签，正常的html标签也可以放
例如：

<Routes>
    <Route path='/' element={<h1>Hello world</h1>}/>
</Routes>

嵌套路由

<Route path="/web" element={<Web />}>
    <Route index path="a" element={<h1>a</h1>} />
    <Route index path="b" element={<h1>b</h1>} />
    <Route index path="c" element={<h1>c</h1>} />
</Route>

注意：需要在父组件中添加<Outlet />组件，用来填充子组件的内容。（即<Outlet />会根据路由的不同动态的渲染不同的子标签，假如当前的路由为/web/a 则<Outlet />等效于<h1>a</h1>）

useParams 和 useSearchParams

URL中传递参数

解析URL：

<Route path="/linux/:chapter_id/:section_id/" element={<Linux />} />

获取参数，类组件写法：

import React, { Component } from 'react';
import { useParams } from 'react-router-dom';

class Linux extends Component {
    state = {  } 
    render() {
        console.log(this.props.params);
        return <h1>Linux</h1>;
    }
}

export default (props) => (
    <Linux
        {...props}
        params={useParams()}
    />
)

函数组件写法：

import React, { Component } from 'react';
import { useParams } from 'react-router-dom';

const Linux = () => {
    console.log(useParams());
    return (<h1>Linux</h1>);
}

export default Linux;

Search Params传递参数

类组件写法：

import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';

class Django extends Component {
    state = {
        searchParams: this.props.params[0],  // 获取某个参数
        setSearchParams: this.props.params[1],  // 设置链接中的参数，然后重新渲染当前页面
    }
    
    handleClick = () => {
        this.state.setSearchParams({
            name: "abc",
            age: 20,
        })
    }

    render() {
        console.log(this.state.searchParams.get('age'));
        return <h1 onClick={this.handleClick}>Django</h1>;
    }
}

export default (props) => (
    <Django
        {...props}
        params={useSearchParams()}
    />
);

函数组件写法：

import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';

const Django = () => {
    let [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('age'));
    return (<h1>Django</h1>);
}

export default Django;

Navigate

引入

import {Routes, Route, Navigate} from 'react-router-dom';

使用

<Route path="*" element={ <Navigate replace to="/404" /> } />