【Vue路由系统详述】
"一切分离都是为了更好的结合，本文详细介绍了前后端架构分离之后，前端如何实现路由的控制，即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路由系统详述】的更多相关文章
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- Vue路由系统
Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...
- Vue专题-路由系统
一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如果实现路由控制,即Vue路由系统. Vue路由系统 VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变, ...
- Vue.js之路由系统
Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...
- vue学习之六路由系统
一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...
- 简简单单的Vue3（插件开发，路由系统，状态管理）
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...
- 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/
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- vue 路由里面的 hash 和 history
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
随机推荐
- nginx 无法启动：bind() to 0.0.0.0:443 failed
bind to 0.0.0.0:443 failed.其实就是443端口被其它程序占用,要结束占用443端口导致nginx不能启动的应用. CMD: 1.查看所有程序使用的端口 netstat -ao ...
- 区间无修改莫队学习笔记（lg1494小z的袜子）
这几天感觉要学的要做的有点多,就偷了个懒没写笔记,赶紧补一下 莫队嘛,一个离线处理各种区间(或树上)询问的神奇算法 简单而言,按左端点排个序然后指针l,r递推就好了 复杂度证明貌似是不待修改的n^1. ...
- 题解 CF409A 【The Great Game】
题目传送门. 思路: 首先我们定义\(2\)个字符串,分别存放 TEAM 1 与 TEAM 2 的出招顺序.接着再定义\(2\)个变量,存放 TEAM 1 与 TEAM 2 的分数. string s ...
- Vue之生命周期activated与created使用
created activated 触发顺序 组件创建最初始 created => mounted =>activated 触发次数 只在组件刚创建时创建 在使用keep-alive标 ...
- Redis到底是多线程还是单线程？线程安全吗，还需要加锁吗？
0. redis单线程问题 单线程指的是网络请求模块使用了一个线程(所以不需考虑并发安全性),即一个线程处理所有网络请求,其他模块仍用了多个线程. 1. 为什么说redis能够快速执行 (1) 绝大部 ...
- JDBC——抽取工具类
目的:简化书写 分析: 1.注册驱动 2.获取连接对象 3.释放资源 1.注册驱动 2.获取连接对象 需求:不想传递参数,还能保证工具类的通用性解决方案:配置文件 jdbc.properties ur ...
- HDU1241 Oil Deposits（dfs+连通块问题）
背景描述 ztw同志负责探测地下石油储藏.ztw现在在一块矩形区域探测石油.他通过专业设备,来分析每个小块中是否蕴藏石油.如果这些蕴藏石油的小方格相邻(横向相邻,纵向相邻,还有对角相邻),那么它们被认 ...
- Linux - Shell - 免密码登录
概述 简述 linux ssh 无密码登录 无能狂怒 最近真是不知道写啥了 环境 os centos7 1. 场景 场景 主机A 需要经常访问 主机B 每次访问, 都要输入一次 密码 问题 每次都输密 ...
- centos7安装启动firefox
1.卸载系统之前Firefox sudo yum erase firefox 2.安装firefox命令: sudo yum install firefox 3.驱动下载地址: https://git ...
- pytorch save model + Gmatch4py + jupyter debugger + community structure
1. pytorch, 使用训练好的模型测试自己图片 2. [ pytorch ] ——基本使用:(2) 训练好的模型参数的保存以及调用 3. Gmatch4py 4. Network Analysi ...