"一切分离都是为了更好的结合,本文详细介绍了前后端架构分离之后,前端如何实现路由的控制,即Vue路由系统——VueRouter.

VueRouter下载地址(默认最新版本):https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

@


VueRouter实现原理:

根据锚点值的改变,修改组件内容.

我们先来看看不使用VueRouter,自己实现路由的控制,如下代码:

<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById('app');
window.onhashchange = function () {
// vue-router的实现原理是根据锚值的改变来对页面进行切换
switch (location.hash) {
case '#/login':
oDiv.innerHTML=`<h1>我是登陆页面</h1>`;
break;
case '#/register':
oDiv.innerHTML = `<h1>我是注册页面</h1>`;
break;
// 输入其他路径将显示为首页
default:
oDiv.innerHTML = `<h1>我是首页</h1>`;
break;
}
};
console.log(location.hash);
</script>
</body>

测试效果如下图:



可以看到,通过改变锚点值,页面跳转到我们需要的内容.

再来看看VueRouter实现路由的控制:

<body>
<div id="app"></div>
<script>
// 第一步:在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Register = {
template: `
<div>
<h1>我是注册页面</h1>
</div>
`,
};
let App = {
// 第四部:监听a标签的锚点值的改变
// 下面的router-link会渲染成a标签,to为标签的href属性,to后面是router中定义的路径
// 下面的router-view是页面内容的渲染出口
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 第二步:实例化一个router对象(本质上是将路径和页面绑定了对应关系)
let router = new VueRouter({
routes: [
// 注意:routes,不是routers
{
path: '/',
component: Home,
},
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 第三步:在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:



路由命名

方式一:

通过在vue-router对象中增加name属性来指定路由名称.

调用方式:v-bind:to={ name: "路由名称" }

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Register = {
template: `
<div>
<h1>我是注册页面</h1>
</div>
`,
};
let App = {
// 下面的router-link会渲染成a标签,to为a标签的href属性,to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定定义的路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
template: `
<div>
<router-link v-bind:to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'register' }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
// 注意:routes, 不是routers
routes: [
{
// 路由命名
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

方式二:

<body>
<div id="app"></div>
<script>
Vue.use(VueRouter);
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<router-view name="header"></router-view>
<router-view name="footer"></router-view>
</div>
`,
};
let router = new VueRouter({
routes: [
{
path: '/',
components: {
header: {
template: `
<div>头部</div>
`,
},
footer: {
template: `
<div>底部</div>
`,
},
},
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
router: router,
components: {
App,
},
});
</script>
</body>


路由参数

<body>
<div id="app"></div>
<script>
/*
在真实的场景中,有以下两种路径形式:
1. xx.html/users/1
2. xx.html/users?userId=1
*/
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是主页面</h1>
</div>
`,
};
let userParams = {
template: `
<div>
<h1>我是用户1的信息</h1>
</div>
`,
};
let userQuery = {
template: `
<div>
<h1>我是用户2的信息</h1>
</div>
`,
};
let App = {
// 下面的router-link会渲染成a标签,to为a标签的href属性,to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
// 下面的params与query参数分别对应上面所说的两种路径形式
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// 1. xx.html/users/1
name: 'userParams',
path: '/users/:userId',
component: userParams,
},
{
// 2. xx.html/users?userId=1
name: 'userQuery',
path: '/users',
component: userQuery,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在跟实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:




路由参数的实现原理

<body>
<div id="app"></div>
<script>
/*
在真实的场景中,有以下两种路径形式:
1. xx.html/user/1
2. xx.html/user/?userId=1
*/
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是主页面</h1>
</div>
`,
};
let userParams = {
template: `
<div>
<h1>我是用户1的信息</h1>
</div>
`,
created () {
console.log('this.$route:', this.$route);
console.log('userId:', this.$route.params.userId);
// 此时可以发送ajax请求到后端获取数据
},
};
let userQuery = {
template: `
<div>
<h1>我是用户2的信息</h1>
</div>
`,
created () {
console.log('this.$route:', this.$route);
console.log('userId:', this.$route.query.userId);
// 此时可以发送ajax请求到后端获取数据
}
};
let App = {
// 下面的router-link会渲染成a标签,to为a标签的href属性,to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
// 下面params与query参数分别对应上面所说的两种路径形式
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// 1. xx.html/user/1
name: 'userParams',
path: '/user/:userId',
component: userParams,
},
{
// 2. xx.html/user/?userId=1
name: 'userQuery',
path: '/user',
component: userQuery,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在跟实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:





子路由

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="childpages01">子页面01</router-link>
<router-link to="childpages02">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/courses',
component: Test,
// children实现子路由(子页面)
children: [
{
path: 'childpages01',
component: ChildPages01,
},
{
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:



可见,使用此方法,子页面不能正常显示.


子路由之append

append参数会在路径后面追加子路由的路径,注意:会在后面一直追加.

append参数只适用于只需一层子路由的情况.

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// 添加append参数
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="childpages01" append>子页面01</router-link>
<router-link to="childpages02" append>子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
path: 'childpages01',
component: ChildPages01,
},
{
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

测试效果如下图:



这里只点击了一次 子页面01,显示的内容是正常的,后面的路径也是正常的.

下面的是点击了两次:



可见,内容显示不正常了,后面的路径也不正常了——append参数会在后面一直添加子路由中的路径.

使用以上方式,路径是写死在属性中的,所以子路径会不断的append到最后面,导致后续访问不到响应的页面,可以采用另一种方式——动态绑定属性.

动态绑定属性

动态绑定属性即给子路由命名,使用子路由命的名称来实现子路径的正常切换.

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// 使用子路由命的名称来实现子路径的正常切换
template: `
<div>
<h1>我是测试页面</h1>
<router-link :to="{ name: 'childpages01' }">子页面01</router-link>
<router-link :to="{ name: 'childpages02' }">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 给子路径命名
name: 'childpages01',
path: 'childpages01',
component: ChildPages01,
},
{
// 给子路径命名
name: 'childpages02',
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

注意:此方法必须使用name查找组件和路径的对应关系,而不能使用path.


子路由之append升级版

所谓的append升级版其实就是同时使用动态绑定属性和append.

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// append升级版:<router-link :to="{ name: 'childpages01' }" append>...</router-link>
template: `
<div>
<h1>我是测试页面</h1>
<router-link :to="{ name: 'childpages01' }" append>子页面01</router-link>
<router-link :to="{ name: 'childpages02' }" append>子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 给子路径命名
name: 'childpages01',
path: 'childpages01',
component: ChildPages01,
},
{
// 给子路径命名
name: 'childpages02',
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>

子路由之非append

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="/test/childpages01">子页面01</router-link>
<router-link to="/test/childpages02">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 子路由之非append(写全路径)
path: '/test/childpages01',
component: ChildPages01,
},
{
// 子路由之非append(写全路径)
path: '/test/childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>


路由重定向

<body>
<div id="app"></div>
<script>
// // 在Vue根实例中使用VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
// 使用redirect实现路由重定向
// 把a标签的锚点值和页面内容绑定了对应关系
redirect: '/login',
component: Pay,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>

如上代码,我们点击支付链接时,将会跳转至登陆页面.



手动路由

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter); let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
</div>
`,
};
let App = {
// 使用v-on(简写为@)给按钮绑定一个事件
template: `
<div>
<router-link to="/">首页</router-link>
<button @click="myClick">点击跳转至测试页面</button>
<router-view></router-view>
</div>
`,
// 定义一个用于跳转至测试页面的的事件
methods: {
myClick: function () {
this.$router.push('/test');
}
},
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
path: '/',
component: Home,
},
{
path: '/test',
component: Test,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>

如上代码,点击按钮即可跳转至测试页面.



路由钩子

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
// 这一步骤将调用路由钩子函数(通过布尔值来判断是否调用该钩子函数)
meta: {required_login: true},
component: Pay,
},
],
});
// 定义一个路由钩子函数
// 通过router对象的beforeEach(function (to, form, next) {})
router.beforeEach(function (to, from, next) {
// to:从哪来
// from:到哪去
// next:下一步做什么
console.log('to:', to);
console.log('from:', from);
console.log('next:', next);
if (to.meta.required_login) {
next('/login');
} else {
next(); // 正常跳转
}
// router.afterEach(function (to, from) { ··· });
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>

如上代码,通过路由钩子函数实现了点击支付链接时跳转至登陆页面的功能.



在路径中去掉"#"号

在实例化的router对象中增加一个属性:mode: 'history',该属性可将路径中显示的"#"号去掉.

<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
// 使用mode: 'history'实现取去掉路径中显示的"#"号
mode: 'history',
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
component: Pay,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>


"

【Vue路由系统详述】的更多相关文章

  1. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  2. Vue路由系统

    Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...

  3. Vue专题-路由系统

    一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如果实现路由控制,即Vue路由系统. Vue路由系统 VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变, ...

  4. Vue.js之路由系统

    Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...

  5. vue学习之六路由系统

    一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...

  6. 简简单单的Vue3(插件开发,路由系统,状态管理)

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...

  7. 04Vue.js路由系统

    Vue.js路由系统: https://pizzali.github.io/2018/10/28/Vue.js%E8%B7%AF%E7%94%B1%E7%B3%BB%E7%BB%9F/

  8. Vue.js—组件快速入门及Vue路由实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

  9. vue 路由里面的 hash 和 history

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...

随机推荐

  1. nginx 无法启动:bind() to 0.0.0.0:443 failed

    bind to 0.0.0.0:443 failed.其实就是443端口被其它程序占用,要结束占用443端口导致nginx不能启动的应用. CMD: 1.查看所有程序使用的端口 netstat -ao ...

  2. 区间无修改莫队学习笔记(lg1494小z的袜子)

    这几天感觉要学的要做的有点多,就偷了个懒没写笔记,赶紧补一下 莫队嘛,一个离线处理各种区间(或树上)询问的神奇算法 简单而言,按左端点排个序然后指针l,r递推就好了 复杂度证明貌似是不待修改的n^1. ...

  3. 题解 CF409A 【The Great Game】

    题目传送门. 思路: 首先我们定义\(2\)个字符串,分别存放 TEAM 1 与 TEAM 2 的出招顺序.接着再定义\(2\)个变量,存放 TEAM 1 与 TEAM 2 的分数. string s ...

  4. Vue之生命周期activated与created使用

    created activated 触发顺序 组件创建最初始 created  =>  mounted =>activated 触发次数 只在组件刚创建时创建 在使用keep-alive标 ...

  5. Redis到底是多线程还是单线程?线程安全吗,还需要加锁吗?

    0. redis单线程问题 单线程指的是网络请求模块使用了一个线程(所以不需考虑并发安全性),即一个线程处理所有网络请求,其他模块仍用了多个线程. 1. 为什么说redis能够快速执行 (1) 绝大部 ...

  6. JDBC——抽取工具类

    目的:简化书写 分析: 1.注册驱动 2.获取连接对象 3.释放资源 1.注册驱动 2.获取连接对象 需求:不想传递参数,还能保证工具类的通用性解决方案:配置文件 jdbc.properties ur ...

  7. HDU1241 Oil Deposits(dfs+连通块问题)

    背景描述 ztw同志负责探测地下石油储藏.ztw现在在一块矩形区域探测石油.他通过专业设备,来分析每个小块中是否蕴藏石油.如果这些蕴藏石油的小方格相邻(横向相邻,纵向相邻,还有对角相邻),那么它们被认 ...

  8. Linux - Shell - 免密码登录

    概述 简述 linux ssh 无密码登录 无能狂怒 最近真是不知道写啥了 环境 os centos7 1. 场景 场景 主机A 需要经常访问 主机B 每次访问, 都要输入一次 密码 问题 每次都输密 ...

  9. centos7安装启动firefox

    1.卸载系统之前Firefox sudo yum erase firefox 2.安装firefox命令: sudo yum install firefox 3.驱动下载地址: https://git ...

  10. pytorch save model + Gmatch4py + jupyter debugger + community structure

    1. pytorch, 使用训练好的模型测试自己图片 2. [ pytorch ] ——基本使用:(2) 训练好的模型参数的保存以及调用 3. Gmatch4py 4. Network Analysi ...